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>

我不知道还有没有其他办法。

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

1 个答案: