javascript - 我怎样才能 "snap scroll"并在捕捉时触发事件？

Question

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

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

Answer 1

正如 Mladen 所建议的，使用 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>

不知道有没有别的办法。