30秒学会 JavaScript 片段 · 2022年3月19日

30秒学会 JavaScript 片段 – Handle scroll stop

Runs the callback whenever the user has stopped scrolling.

  • Use EventTarget.addEventListener() to listen for the 'scroll' event.
  • Use setTimeout() to wait 150 ms until calling the given callback.
  • Use clearTimeout() to clear the timeout if a new 'scroll' event is fired in under 150 ms.

代码实现

const onScrollStop = callback => {
  let isScrolling;
  window.addEventListener(
    'scroll',
    e => {
      clearTimeout(isScrolling);
      isScrolling = setTimeout(() => {
        callback();
      }, 150);
    },
    false
  );
};

onScrollStop(() => {
  console.log('The user has stopped scrolling');
});

翻译自:https://www.30secondsofcode.org/js/s/on-scroll-stop