上下滚动时淡入淡出

Question

我想扩展这个答案中提供的代码。那里的代码在向下滚动时淡入元素，在向上滚动时淡出图像，但在向下滚动时不会淡出。我想实现所有元素：向下滚动时淡入，元素离开视口时淡出，向上滚动时淡入，元素离开视口时淡出。

Answer 1

您可以使用Intersection Observer API来实现所需的结果，而不是使用jQuery事件侦听器。scroll

您可以根据您的需要调整threshold选项。IntersectionObserver此选项用于指示应在目标可见性的多少百分比下执行观察者的回调。我把它设置为70%。

const observerOptions = {
  root: null,
  rootMargin: "0px",
  threshold: 0.7
};

function observerCallback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // fade in observed elements that are in view
      entry.target.classList.replace('fadeOut', 'fadeIn');
    } else {
      // fade out observed elements that are not in view
      entry.target.classList.replace('fadeIn', 'fadeOut');
    }
  });
}

const observer = new IntersectionObserver(observerCallback, observerOptions);

const fadeElms = document.querySelectorAll('.fade');
fadeElms.forEach(el => observer.observe(el));

.fade {
  margin: 50px;
  padding: 50px;
  background-color: lightgreen;
  transition: opacity 0.7s ease-in;
}

.fadeOut { opacity: 0; }
.fadeIn { opacity: 1; }

<div class="container">
  <div class="fade fadeOut">Element 1</div>
  <div class="fade fadeOut">Element 2</div>
  <div class="fade fadeOut">Element 3</div>
  <div class="fade fadeOut">Element 4</div>
  <div class="fade fadeOut">Element 5</div>
  <div class="fade fadeOut">Element 6</div>
  <div class="fade fadeOut">Element 7</div>
  <div class="fade fadeOut">Element 8</div>
  <div class="fade fadeOut">Element 9</div>
  <div class="fade fadeOut">Element 10</div>
</div>