Reactjs 监听滚动结束事件

Question

我正在开发一个小应用程序，想知道如何监听滚动事件的结束。

我知道以下代码可以让我监听滚动事件，但在我的情况下，我正在寻找一种方法，在用户停止滚动后触发事件。

window.addEventListener('scroll', () => {
  (!this.state.showScrollWidget) ? this.setState({showScrollWidget: true}) : null;
})

如果有任何关于如何最好地完成它的想法，我将非常感激您的帮助；否则，如果有任何第三方库可以完成这项工作，我也会非常感激任何建议。

谢谢。

- BenFarhat Souhaib

---

也许可以使用一个间隔函数来帮助，它会检查滚动的最后位置和当前位置是否相同，如果相同，则表示用户没有在滚动。不过你打算使用哪个库呢？ - user1735921

是的，我知道可以通过间隔函数来实现，但我想知道是否有更好的解决方案。关于库，我正在等待一些建议。 - BenFarhat Souhaib

不需要。只需使用setTimeout()即可。使用另一个库来处理如此微不足道的事情是没有意义的（如果真的存在的话 - 我表示怀疑）。 - Rory McCrossan

Answer 1

我认为没有事件可以通知您滚动停止了。一般来说，您需要等待一段时间直到最后一个滚动事件发生。通常情况下，您可以使用防抖操作 - 许多不同的实用库都实现了它，例如lodash (https://lodash.com/docs/4.17.10#debounce)：

window.addEventListener(
  "scroll",
  _.debounce(() => {
    console.log("scrolling stopped");
  }, 1000)
);

- Vladimir Rovensky

Answer 2

使用 lodash debounce 解决了这个问题。

1. 绑定 onScroll 事件：

 <List onScroll={e => handleScroll(e)}/>

2. 使用useMemo优化endScroll函数：

 const handleEndScroll = useMemo(
    () =>
      _.debounce(() => console.log("END SCROLL"), 1000),
    []
  );

3. 处理滚动事件和结束滚动事件：

 const handleScroll = e => {
    console.log("scroll scroll scroll");
    handleEndScroll();
  };

注意:

• 安装并导入 lodash
• 导入 useMemo

- Ido Bar Lev

Answer 3

scrollend事件在Firefox 109中被添加。Blink/Webkit浏览器预计将在2023年中期至晚期获得该事件。

- Gene S

---

https://caniuse.com/?search=scrollend - James Pearce