我如何实现“快速滚动”并在快速滚动结束时触发事件？

Question

我尝试使用scroll-snap CSS属性来实现滚动/快照效果，表示效果良好。

但是当滚动/快照发生时，我需要触发一个事件。请问如何实现？

- karolis2017

---

我不确定是否存在事件被触发，但你可以使用Intersection Observer原生API：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API。 - Mladen Skrbic

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>

我不知道是否有其他方法。

- CodeF0x

---

在我的Mac上，最新版本的Firefox可以正常工作。 - str

在Safari v16.5中存在错误。我有三个部分，每次从1滚动到2时，它显示3，每次从3滚动到2时，它显示1。 - Deepak

Answer 2

CSS滚动捕捉模块2级规范定义了两个事件`snapChanging`和`snapChanged`。前者在从捕捉位置滚动时显然会触发，后者在滚动位置被捕捉时触发。后者显然涵盖了您的用例。

然而，截至本回答发布时，该规范仍处于早期草案阶段，没有浏览器支持这些事件。因此，在它们不可用的情况下，您将不得不使用一些polyfill。

- Sebastian Zartner