如何使用jQuery检测用户向下滚动、向上滚动及停止滚动三种事件？

要实现检测向下滚动、向上滚动以及滚动停止的需求，你可以通过记录滚动位置、对比滚动方向，再结合定时器防抖来实现：

// 记录上一次滚动的垂直位置
let lastScrollTop = 0;
// 存储滚动定时器的ID
let scrollTimer;

$(window).on('scroll', function() {
    // 清除之前的定时器，避免误触发停止滚动的判断
    clearTimeout(scrollTimer);
    
    // 获取当前滚动的垂直位置
    const currentScrollTop = $(this).scrollTop();
    
    // 判断滚动方向
    if (currentScrollTop > lastScrollTop) {
        console.log('down scroll');
    } else if (currentScrollTop < lastScrollTop) {
        console.log('top scroll');
    }
    // 相等时不输出（比如滚动到顶部/底部后继续滚动的情况）
    
    // 更新上一次滚动位置
    lastScrollTop = currentScrollTop;
    
    // 设置定时器，300ms内没有新的滚动事件则判定为停止滚动
    scrollTimer = setTimeout(function() {
        console.log('stop scroll');
    }, 300);
});

关键逻辑说明： #

• 滚动方向判断：通过对比currentScrollTop（当前滚动位置）和lastScrollTop（上一次滚动位置）的大小，区分向下或向上滚动。
• 滚动停止检测：每次触发scroll事件时先清除之前的定时器，然后重新设置一个定时器。如果300ms内没有新的滚动事件触发，定时器就会执行，输出停止滚动的日志。你可以根据需求调整这个时间阈值（比如改成200ms或500ms）。
• 性能优化：滚动事件会频繁触发，使用定时器防抖可以避免不必要的计算和日志输出，提升页面性能。

注意点： #

• 当滚动到页面顶部或底部时，继续滚动会出现currentScrollTop等于lastScrollTop的情况，此时不会输出方向日志，符合正常交互逻辑。
• 如果需要在滚动停止时执行更复杂的操作，直接在setTimeout的回调函数里添加即可。

内容的提问来源于stack exchange，提问作者Kunal Verma