Reactjs 监听滚动结束事件答案

【问题标题】：Reactjs Listen for scroll end eventsReactjs 监听滚动结束事件
【发布时间】：2018-10-12 08:40:35
【问题描述】：

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

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

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

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

谢谢。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

注意：

【讨论】：