用户停止滚动时的事件

IT技术 javascript jquery scroll jquery-events
2021-01-11 08:08:07

当用户滚动页面时,我想做一些奇特的 jQuery 东西。但是我不知道如何解决这个问题,因为只有scroll()方法。

有任何想法吗?

6个回答

您可以设置scroll()超时,每次用户滚动时都会被覆盖。这样,当他在一定毫秒后停止时,您的脚本将运行,但如果他同时滚动,计数器将重新开始,脚本将等待他再次完成滚动。

更新:

因为这个问题再次得到了一些行动,我想我不妨用添加scrollEnd事件的 jQuery 扩展来更新它

// extension:
$.fn.scrollEnd = function(callback, timeout) {          
  $(this).on('scroll', function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

// how to call it (with a 1000ms timeout):
$(window).scrollEnd(function(){
    alert('stopped scrolling');
}, 1000);
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<div style="height: 200vh">
  Long div
</div>

1000 ms 比 250 ms 好很多
2021-03-23 08:08:07
这种技术也称为事件去抖动。
2021-03-27 08:08:07

这是一个使用 setTimeout 在用户停止滚动时触发函数的简单示例:

(function() {        
    var timer;
    $(window).bind('scroll',function () {
        clearTimeout(timer);
        timer = setTimeout( refresh , 150 );
    });
    var refresh = function () { 
        // do stuff
        console.log('Stopped Scrolling'); 
    };
})();

触发滚动事件时清除计时器。一旦滚动停止,刷新功能就会被触发。

或者作为插件:

$.fn.afterwards = function (event, callback, timeout) {
    var self = $(this), delay = timeout || 16;

    self.each(function () { 
        var $t = $(this);
        $t.on(event, function(){
            if ($t.data(event+'-timeout')) {
                clearTimeout($t.data(event+'-timeout'));
            }
            $t.data(event + '-timeout', setTimeout(function () { callback.apply($t); },delay));
        })
    });
    return this;
};

在 div(带有命名空间)上的最后一个滚动事件的 100 毫秒后触发回调:

$('div.mydiv').afterwards('scroll.mynamespace', function(e) {
        // do stuff when stops scrolling
        $(this).addClass('stopped');
    }, 100
);

我用它来滚动和调整大小。

这被称为“去抖动”方法。更多信息(和可重用功能)在这里:davidwalsh.name/function-debounce
2021-04-08 08:08:07

这是基于上述相同想法的另一个更通用的解决方案:

var delayedExec = function(after, fn) {
    var timer;
    return function() {
        timer && clearTimeout(timer);
        timer = setTimeout(fn, after);
    };
};

var scrollStopper = delayedExec(500, function() {
    console.log('stopped it');
});

document.getElementById('box').addEventListener('scroll', scrollStopper);
此外,您可以通过将值 500 更改为较低的值 (~~100) 来控制触发此事件的速度
2021-03-22 08:08:07

为什么这么复杂?正如文档所指出的,这个http://jsfiddle.net/x3s7F/9/有效!

$('.frame').scroll(function() {
 $('.back').hide().fadeIn(100);
}

http://api.jquery.com/scroll/


注意:scroll Windows Chrome 上事件与所有其他事件不同。您需要快速滚动以获得与例如 FF 中的结果相同的结果。看看https://liebdich.biz/back.min.js的“X”函数。

how many ms a scroll event测试的一些发现

  • Safari、Mac FF、Mac Chrome:约 16 毫秒一个事件。
  • Windows FF:约 19 毫秒一个事件。
  • Windows Chrome:当滚动缓慢时,事件最多约 130 毫秒。
  • Internet Explorer:最多 ~110 毫秒一个事件。

http://jsfiddle.net/TRNCFRMCN/1Lygop32/4/

谢谢。对未注释的投票者:“现在更好了吗?” %)P
2021-03-21 08:08:07
实际上,这非常有效。不幸的是,在演示中使用滚动条不起作用,虽然我相信这只是因为fadeIn功能。将不得不进行更多测试以找出是否还有更多错误,但是做得很好,效果很好!对于这么小的任务,其他解决方案要复杂得多。
2021-03-29 08:08:07
现在,如果我只想保留滚动事件的条件,而不是如何检测滚动事件?你能帮忙吗?
2021-04-11 08:08:07

我也需要实现讨论过的onScrollEnd事件。使用计时器的想法对我有用。

我使用JavaScript module模式实现了这一点

var WindowCustomEventsModule = (function(){

    var _scrollEndTimeout = 30;

    var _delayedExec = function(callback){
        var timer;
        return function(){
            timer && clearTimeout(timer);
            timer = setTimeout(callback, _scrollEndTimeout);
        }
    };

    var onScrollEnd = function(callback) { 
        window.addEventListener('scroll', _delayedExec(callback), false);         
    };

    return {
        onScrollEnd: onScrollEnd
    }
})();

// usage example
WindowCustomEventsModule.onScrollEnd(function(){
    //
    // do stuff
    //
});

希望这会帮助/激励某人