如何在捕捉时“捕捉滚动”并触发事件？

Question

我尝试使用scroll-snap在表示方面效果很好的 CSS 属性。

但我需要在滚动/捕捉时触发一个事件。我怎样才能做到这一点？

Answer 1

正如姆拉登建议的那样，使用Intersection Observer Api似乎（有点）工作。

（在最新的 Firefox 上似乎有问题——向上滚动时，观察者会发疯并且只记录第一部分——在最新的 Chrome 上工作正常）

const observer = new IntersectionObserver(entries => {
  entries.forEach(elem => {
    if (elem.isIntersecting) {
      const text = elem.target.querySelector('h2').innerText;
      console.log('Ping! Visible: ', text);
    }
  });
});

document.querySelectorAll('section').forEach(elem => observer.observe(elem));

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroller section {
  height: 300px;
  background: gray;
  border: 1px solid black;
  scroll-snap-align: start;
}

<article class="scroller">
  <section>
    <h2>Section one</h2>
  </section>
  <section>
    <h2>Section two</h2>
  </section>
  <section>
    <h2>Section three</h2>
  </section>
</article>

不知道有没有别的办法