Question

我想扩展this答案中提供的代码。向下滚动时，其中的代码会淡入一个元素，向上滚动时会淡出图像，而向下滚动时不会淡出图像。我要实现所有元素：向下滚动时淡入，在元素离开视口时淡出，向上滚动时衰落和在元素离开视口时淡出。

Answer 1

不是使用jQuery和scroll事件监听器，而是使用香草Javascript和Intersection Observer API来获得所需的结果。

您可以根据需要调整threshold的{{1}}选项。此选项用于指示观察者的回调应在目标可见性的百分比上执行。我已将其设置为70％。

IntersectionObserver

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 fadeElms = document.querySelectorAll('.fade');

const observer = new IntersectionObserver(observerCallback, observerOptions);
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; }

上下滚动时淡入和淡出

1 个答案: