javascript-用户停止滚动时的事件

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

有任何想法吗?

dantz asked 2020-01-13T12:17:50Z
8个解决方案
68 votes

您可以使<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="height: 200vh"> Long div </div>具有一个超时,该超时在用户每次滚动时都会被覆盖。 这样,当他在一定的毫秒数后停止运行时,脚本将运行,但是如果他在此期间滚动,则计数器将重新开始,脚本将等待直到完成滚动为止。

更新:

因为这个问题再次起作用,所以我认为我不妨使用添加了<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="height: 200vh"> Long div </div>事件的jQuery扩展对其进行更新。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="height: 200vh">
  Long div
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

Stephan Muller answered 2020-01-13T12:19:15Z
60 votes

这是一个简单的示例,使用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(带有名称空间)的最后一个滚动事件发生100ms之后触发回调:

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

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

Phil M answered 2020-01-13T12:19:53Z
10 votes

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

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);
xat answered 2020-01-13T12:20:14Z
2 votes

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

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

[http://api.jquery.com/scroll/。]


注意:Windows Chrome上的how many ms a scroll event事件与所有其他事件不同。 您需要快速滚动才能获得与例如 FF。 查看[https://liebdich.biz/back.min.js]的“ X”功能。

我的how many ms a scroll event测试得出的一些发现:

  • Safari,Mac FF,Mac Chrome:大约16毫秒。
  • Windows FF:〜19ms事件。
  • Windows Chrome:滚动缓慢时,事件最多可发生130ms。
  • Internet Explorer:一个事件最多约110毫秒。

[http://jsfiddle.net/TRNCFRMCN/1Lygop32/4/。]

loveNoHate answered 2020-01-13T12:21:09Z
1 votes

没有诸如“ scrollEnd”之类的事件。 我建议您使用setInterval每隔一段时间(例如200ms)检查一次scroll()返回的值,并记录当前值和上一个值之间的增量。 如果增量变为零,则可以将其用作事件。

dpq answered 2020-01-13T12:21:29Z
1 votes

jquery mobile中有scrollstart和scrollstop函数。

使用滚动停止的示例:

$(document).on("scrollstop",function(){
   alert("Stopped scrolling!");
});

希望这对某人有帮助。

Dima answered 2020-01-13T12:21:58Z
1 votes

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

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

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
    //
});

希望这会帮助/启发某人

Martin Kuzdowicz answered 2020-01-13T12:22:27Z
0 votes

我从拼凑而成的快速片段中提取了一些代码作为示例(请注意,scroll.chain是一个对象,其中包含两个数组start和end,它们是回调函数的容器)。 另外请注意,我在这里使用jQuery和下划线。

$('body').on('scroll', scrollCall);
scrollBind('end', callbackFunction);
scrollBind('start', callbackFunction);

var scrollCall = function(e) {
    if (scroll.last === false || (Date.now() - scroll.last) <= 500) {
        scroll.last = Date.now();
        if (scroll.timeout !== false) {
            window.clearTimeout(scroll.timeout);
        } else {
            _(scroll.chain.start).each(function(f){
                f.call(window, {type: 'start'}, e.event);
            });
        }
        scroll.timeout = window.setTimeout(self.scrollCall, 550, {callback: true, event: e});
        return;
    }
    if (e.callback !== undefined) {
        _(scroll.chain.end).each(function(f){
            f.call(window, {type: 'end'}, e.event);
        });
        scroll.last = false;
        scroll.timeout = false;
    }
};

var scrollBind = function(type, func) {
    type = type.toLowerCase();
    if (_(scroll.chain).has(type)) {
        if (_(scroll.chain[type]).indexOf(func) === -1) {
            scroll.chain[type].push(func);
            return true;
        }
        return false;
    }
    return false;
}
whoughton answered 2020-01-13T12:22:47Z
translate from https://stackoverflow.com:/questions/3701311/event-when-user-stops-scrolling