如果从顶部和底部滚动到视图中，则向元素添加不同的类

Question

如果从顶部和底部滚动到视图中，我有一段代码会向元素添加不同的 css class。

为此，代码识别四种状态：

从顶部滚动到视图中（添加 class "inview-top"）
从底部滚动到视图中（添加 class "inview-bottom"）
滚出顶部的视图（添加 class "outview-top"）
滚出底部的视图（添加 class "outview-top"）

它还会在添加外视图 classes 时删除任何内视图 classes，反之亦然。

我的问题是它使用 Intersection Observer API 来实现这一点，它似乎非常不可靠。当观察到的元素仅彼此下方时，它可以完美地工作，但是当它们在一排中彼此相邻时，它会变得非常错误。很多时候它根本不会触发回调。在我的示例中，这意味着大多数 DIV 保持不可见，即使它们在滚动到视图中后应该立即可见。

这就是为什么我想知道一个可靠的方法来达到预期的结果。无论页面上有多少元素，无论它们放置在何处，它都应该表现良好。

您可以尝试我的代码 on jsFiddle 或在此处查看：

const config = {
  root: null,
  rootMargin: '0px',
  threshold: [0.15, 0.2, 0.25, 0.3]
};

let previousY = 0;
let previousRatio = 0;


let observer = new IntersectionObserver(function(entries) {
  entries.forEach(entry => {
    const currentY = entry.boundingClientRect.y
    const currentRatio = entry.intersectionRatio
    const isIntersecting = entry.isIntersecting
    const element = entry.target;

    element.classList.remove("outview-top", "inview-top", "inview-bottom", "outview-bottom");
    // Scrolling up
    if (currentY < previousY) {
      const className = (currentRatio >= previousRatio) ? "inview-top" : "outview-top";
      element.classList.add(className);

      // Scrolling down
    } else if (currentY > previousY) {
      const className = (currentRatio <= previousRatio) ? "outview-bottom" : "inview-bottom";
      element.classList.add(className);
    }

    previousY = currentY
    previousRatio = currentRatio
  })
}, config);

const viewbox = document.querySelectorAll('.viewme');
viewbox.forEach(image => {
  observer.observe(image);
});

body {
  text-align: center;
}
.hi {
  padding: 40vh 0;
  background: lightblue;
}
.box {
  width: 23%; /* change this to 100% and it works fine */
  height: 40vh;
  margin-bottom: 10px;
  background: blue;
  display: inline-block;
}

.viewme {
  opacity: 0;
  transform: translateY(20px);
  transition: all .3s ease;
}

.inview-top, .inview-bottom {
  opacity: 1;
  transform: translateY(0);
}

.outview-top {
  opacity: 0;
  transform: translateY(-20px);
}
.outview-bottom {
  opacity: 0;
  transform: translateY(20px);
}

<p class="hi">There should always be four blue boxes in one row. Scroll down and back up</p>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>

Answer 1

问题出在 previousY 和 previousRatio 变量上。它们正在被每一个元素改变。所以当迭代处理当前元素时，变量已经被前一个元素改变了。

~~解决方法是把两个变量都改成数组，然后把每一项的值加进去。这样每个修改都与其他元素分开。~~

我把class改成了数据属性。它提供了更可靠的交换和清理。

使用 IntersectionObserver:

解决方法是计算div与根顶相关的顶和div与根底相关的底。这样你就不需要添加全局变量或数组来存储以前的位置或口粮。

const config = {
  // Add root here so rootBounds in entry object is not null
  root: document,
  // Margin to when element should take action
  rootMargin: '-50px',
  // Fine tune threshold. The callback will fired 30 times during intersection. You can change it to any number yout want
  threshold: [...Array(30).keys()].map(x => x / 29)
};

let observer = new IntersectionObserver(function(entries, observer) {

  entries.forEach((entry, index) => {
    const element = entry.target;

    // Get root elemenet (document) coords
    const rootTop = entry.rootBounds.top;
    const rootBottom = entry.rootBounds.height;

    // Get div coords
    const topBound = entry.boundingClientRect.top - 50; // -50 to count for the margine in config
    const bottomBound = entry.boundingClientRect.bottom;

    let className;

    // Do calculations to get class names
    if (topBound < rootTop && bottomBound < rootTop) {
      className = "outview-top";
    } else if (topBound > rootBottom) {
      className = "outview-bottom";
    } else if (topBound < rootBottom && bottomBound > rootBottom) {
      className = "inview-bottom";
    } else if (topBound < rootTop && bottomBound > rootTop) {
      className = "inview-top";
    }
    element.setAttribute('data-view', className);

  })
}, config);

const viewbox = document.querySelectorAll('.viewme');
viewbox.forEach(image => {
  observer.observe(image);
});

body {
  text-align: center;
}

.margins {
  position: fixed;
  top: 50px;
  bottom: 50px;
  border-top: 2px dashed;
  border-bottom: 2px dashed;
  z-index: 1;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.hi {
  padding: 40vh 0;
  background: lightgray;
}

.box {
  width: 23%;
  /* change this to 100% and it works fine */
  height: 40vh;
  margin-bottom: 10px;
  background: lightblue;
  display: inline-block;
}

.viewme {
  opacity: 0;
  transform: translateY(20px);
  transition: all .3s ease;
}

.viewme[data-view='inview-top'],
.viewme[data-view='inview-bottom'] {
  opacity: 1;
  transform: translateY(0);
}

.viewme[data-view='outview-top'] {
  opacity: 0;
  transform: translateY(-20px);
}

.viewme[data-view='outview-bottom'] {
  opacity: 0;
  transform: translateY(20px);
}

<p class="hi">There should always be four blue boxes in one row. Scroll down and back up</p>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>

<div class='margins'>

</div>

备选方案：

使用 scroll 事件。这种方法比 IntersectionObserver 更可靠，也更简单。但是，它可能会导致一些延迟（对于大量元素）。

const viewbox = document.querySelectorAll('.viewme');
const containerHeight = window.innerHeight;

window.addEventListener("scroll", function(e) {
  const direction = (this.oldScroll > this.scrollY) ? "up" : "down";
  this.oldScroll = this.scrollY;

  viewbox.forEach((element, index) => {
    element.viewName = element.viewName || "";
    const rect = element.getBoundingClientRect();
    const top = rect.top + 50;
    const bottom = rect.bottom - 50;

    if (direction == "down") {
      if (top > 0 && top < containerHeight)
        element.viewName = "inview-bottom";
      else if (top < 0 && bottom < 0)
        element.viewName = "outview-top";

    } else {
      if (top > containerHeight)
        element.viewName = "outview-bottom";
      else if (top < 0 && bottom > 0)
        element.viewName = "inview-top";
    }
    element.setAttribute('data-view', element.viewName);
  });
});

// Trigger scroll on initial load
window.dispatchEvent(new Event('scroll'));

body {
  text-align: center;
}

.margins {
  position: fixed;
  top: 50px;
  bottom: 50px;
  border-top: 2px dashed;
  border-bottom: 2px dashed;
  z-index: 1;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.hi {
  padding: 40vh 0;
  background: lightgray;
}

.box {
  width: 23%;
  /* change this to 100% and it works fine */
  height: 40vh;
  margin-bottom: 10px;
  background: lightblue;
  display: inline-block;
}

.viewme {
  opacity: 0;
  transform: translateY(20px);
  transition: all .3s ease;
}

.viewme[data-view='inview-top'],
.viewme[data-view='inview-bottom'] {
  opacity: 1;
  transform: translateY(0);
}

.viewme[data-view='outview-top'] {
  opacity: 0;
  transform: translateY(-20px);
}

.viewme[data-view='outview-bottom'] {
  opacity: 0;
  transform: translateY(20px);
}

<p class="hi">There should always be four blue boxes in one row. Scroll down and back up</p>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>

<div class='margins'>

</div>

Answer 2

正如 Kalimah 已经指出的那样，您的方法的问题在于您如何处理全局变量。如果元素 1 滚动到视图中，则更改变量，此行上的所有其余元素将看不到任何方向变化，也不会设置动画。

您可以使用的另一种方法是这样的，检查元素 top/bottom 是否在视图之外。这现在只适用于向下滚动，但我认为你明白了，可以将它扩展到你需要的任何地方。

const config = {
  root: null,
  rootMargin: '0px',
  threshold: [0.15, 0.2, 0.25, 0.3]
};

let observer = new IntersectionObserver(function(entries) {
  entries.forEach(entry => {
    const currentY = entry.boundingClientRect.y;
    const currentRatio = entry.intersectionRatio;
    const isIntersecting = entry.isIntersecting;
    const element = entry.target;
    element.classList.remove("outview-top", "inview-top", "inview-bottom", "outview-bottom");
    if (isTopVisible(element) ){
     element.classList.add('inview-top');
    } else if (isBottomVisible(element) ) {
     element.classList.add('inview-bottom');
    }

  })
}, config);

function isTopVisible(element) {
 const elementTop = element.getBoundingClientRect().top;
 const scrollTop = document.documentElement.scrollTop;
 return ( scrollTop > elementTop);
}

function isBottomVisible(element) {
 const elementBottom = element.getBoundingClientRect().bottom;
 const scrollBottom = document.documentElement.scrollTop + document.documentElement.clientHeight;
 return (scrollBottom > elementBottom);
}

const viewbox = document.querySelectorAll('.viewme');
viewbox.forEach(image => {
  observer.observe(image);
});

.hi {
  padding: 40vh 0;
  background: lightblue;
  text-align:center;
}
.box {
  width: 23%; /* change this to 100% and it works fine */
  height: 40vh;
  margin-bottom: 10px;
  background: blue;
  display: inline-block;
}

.viewme {
  opacity: 0;
  transform: translateY(20px);
  transition: all .3s ease;
}

.inview-top, .inview-bottom {
  opacity: 1;
  transform: translateY(0);
}

.outview-top {
  opacity: 0;
  transform: translateY(-20px);
}
.outview-bottom {
  opacity: 0;
  transform: translateY(20px);
}

<p class="hi">There should always be four blue boxes in one row. Scroll down and back up</p>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>

如果从顶部和底部滚动到视图中，则向元素添加不同的类

Add different classes to elements if scrolled into view from top and bottom

javascript

jquery

intersection-observer

使用 IntersectionObserver:

备选方案：

如果从顶部和底部滚动到视图中，则向元素添加不同的 类

Add different classes to elements if scrolled into view from top and bottom

javascript

jquery

intersection-observer

使用 IntersectionObserver:

备选方案：

如果从顶部和底部滚动到视图中，则向元素添加不同的类