jquery Reactjs侦听滚动结束事件

vlf7wbxs 于 2022-11-03 发布在 jQuery

关注(0)|答案(2)|浏览(201)

我正在开发一个小型应用程序，我想知道如何侦听滚动事件的“结束”。
我知道下面的代码允许我侦听滚动事件，但在我的例子中，我正在寻找一种方法，一旦用户停止滚动，就触发一个事件。

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

如果任何人有一个关于最好的方法来做它的想法我将感谢帮助，否则如果有任何第三方图书馆可能做的工作我也将感谢任何建议。

2条答案

我不认为有任何事件通知你滚动停止。一般来说，你需要等待一段时间，直到最后一个滚动事件。通常你会使用去反跳操作-许多不同的实用程序库实现它，如lodash（https：//lodash.com/docs/4.17.10#debounce）：

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

已使用lodash debounce解决问题。
1.附加onScroll事件：

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

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

1.处理滚动和结束滚动：

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

备注：