jquery Reactjs侦听滚动结束事件

vlf7wbxs  于 2022-11-03  发布在  jQuery
关注(0)|答案(2)|浏览(200)

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

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

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

  • 谢谢-谢谢
ni65a41a

ni65a41a1#

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

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

oaxa6hgo2#

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

<List onScroll={e => handleScroll(e)}/>
  1. endScroll函数的useMemo
const handleEndScroll = useMemo(
    () =>
      _.debounce(() => console.log("END SCROLL"), 1000),
    []
  );

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

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

备注:

  • 安装并导入lodash
  • 导入useMemo

相关问题