jquery - 快速滚动正在破坏 jQuery 淡入功能

Question

我在尝试使用两个单独的功能时遇到问题。首先，我使用一些 jQuery 使内容在进入浏览器窗口后淡入，其次我在 CSS 中使用快速滚动。

我已经让这两个功能独立工作，但是，当我尝试同时运行这两个功能时，似乎滚动捕捉正在破坏淡入。我认为这可能与溢出有关，但我我对 jQuery 的了解已经有点超出了我的理解范围，所以不确定如何(如果？)解决这个问题？

这是我当前的代码...

$(window).on("load",function() {
  $(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectBottom = $(this).offset().top + $(this).outerHeight();
      
      /* If the element is completely within bounds of the window, fade it in */
      if (objectBottom < windowBottom) { //object comes into view (scrolling down)
        if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
      } else { //object goes out of view (scrolling up)
        if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
      }
    });
  }).scroll(); //invoke scroll-handler on page-load
});

body {
  margin: 0;
}

.snap-scroll-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
}

.snap {
  width: 100%;
  height: 100%;
  scroll-snap-stop: normal;
  scroll-snap-align: start;
  position: relative;
  color: white;
  transition: 300ms all ease-in-out;
}

.snap:nth-child(1) {background: lightpink;}.snap:nth-child(2) {background:lightgreen;}.snap:nth-child(3) {background: lightblue;}.snap:nth-child(4) {background: lightyellow;}

.fade {
	opacity: 1;
  transition: 300ms all ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="snap-scroll-wrapper">
  <div class="snap">
    <code class="fade">Some text here</code>
  </div>
  <div class="snap">
    <code class="fade">Some text here</code>
  </div>
  <div class="snap">
    <code class="fade">Some text here</code>
  </div>
  <div class="snap">
    <code class="fade">Some text here</code>
  </div>
</div>

我在 Stackoverflow 和其他地方搜索了有同样问题的其他人，但似乎找不到有确切(甚至相当接近)问题的人，因此决定发布我自己的问题。

任何人都可以提供的见解将不胜感激!

Answer 1

不要为此使用滚动事件监听器，尝试使用 Intersection Observer API。每个浏览器都支持它，它旨在解决这样的问题:一个元素何时与另一个元素重叠，与视口(viewport)重叠，诸如此类。

关于this site there is a good example关于如何在元素进入视口(viewport)后淡入(向下滚动以查看其实际效果)

要使用 IO，您首先必须为其设置选项，然后定义要监视的元素，最后定义 IO 触发后到底会发生什么。

这是一个帮助您入门的简短示例:

const SELECTOR = '.watched';
const ANIMATE_CLASS_NAME = 'animated';

const animate = element => (
  element.classList.add(ANIMATE_CLASS_NAME)
);

const isAnimated = element => (
  element.classList.contains(ANIMATE_CLASS_NAME)
);

const intersectionObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    
    // when element's is in viewport,
    // animate it!
    if (entry.intersectionRatio > 0) {
      animate(entry.target);
      // remove observer after animation
      observer.unobserve(entry.target);
    }
  });
});

// get only these elements,
// which are not animated yet
const elements = [].filter.call(
  document.querySelectorAll(SELECTOR),
  element => !isAnimated(element, ANIMATE_CLASS_NAME)
);
//console.log(elements);

// start observing your elements
elements.forEach((element) => intersectionObserver.observe(element));

.h100 {
height: 100vh;
}

.watched {
 opacity: 0;
 transition: opacity .5s;
}

.watched.animated {
opacity: 1;
}

<div class="h100">
scroll down
</div>
<div class="watched">
I'm watched
</div>
<div class="h100">
Another element, keep scrolling
</div>
<div class="watched">
I'm also watched
</div>