Reactjs监听滚动结束事件

Question

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

我知道以下代码允许我侦听滚动事件，但就我而言，我正在寻找一种一旦用户停止滚动即可触发事件的方法。

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

如果有人对最好的方法有任何想法，我将不胜感激，否则，如果有任何第三方库可以完成这项工作，我也将感谢您的任何建议。

谢谢。

Answer 1

通过使用解决了问题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

Answer 2

我认为没有任何事件可以通知您滚动停止。通常，您需要等待一段时间才能到达上一个滚动事件。通常，您会为此使用debounce操作-许多不同的实用程序库都实现了它，例如lodash（https://lodash.com/docs/4.17.10#debounce）：

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