使用javascript滚动滚动条或鼠标滚轮后的火灾事件

I would like to know if it is possible to fire an event after the scrolling of a page, when using the scrollbar or mouse-wheel (or with a swipe on a touch device).

我想知道是否可以在滚动页面后使用滚动条或鼠标滚轮(或在触摸设备上轻扫)时触发事件。

Basically, I'd like to detect when the user has stopped scrolling so I can then AJAX-load, rather than loading while scrolling.

基本上,我想检测用户何时停止滚动,以便我可以加载AJAX,而不是在滚动时加载。

It seems that jQuery's .scroll() is firing every time a user scrolls, and it seems clunky to have an event fire all the time. Is there such thing as .onScrollAfter(), synonymous to the .onMouseUp()?

似乎jQuery的.scroll()每次用户滚动时都会触发,而且一直有事件触发似乎很笨拙。有没有.onScrollAfter(),与.onMouseUp()同义吗?

I'd like to know whether this is possible (or if a function already exists) without using a framework, though I would consider one; especially jQuery.

我想知道这是否可能(或者如果函数已经存在)而不使用框架,尽管我会考虑一个;特别是jQuery。

3 个解决方案

#1

This event does not exist. You can emulate it by using timeouts:

此事件不存在。您可以使用超时来模拟它:

Example (concept code):

示例(概念代码):

(function() {
    var timer;
    /* Basic "listener" */
    function scroll_finish(ev) {
        clearTimeout(timer);
        timer = setTimeout(scroll_finished, 200, ev);
        //200ms. Too small = triggered too fast. Too high = reliable, but slow
    }
    window.onscroll = scroll_finish; // Or addEventListener, it's just a demo

    // Fire "events"
    var thingey = [];
    function scroll_finished(ev) {
        // Function logic
        for (var i=0; i<thingey.length; i++) {
            thingey[i](ev);
        }
    }
    // Add listener
    window.addScrollListener = function(fn) {
        if (typeof fn  === 'function') {
            thingey.push(fn);
        } else {
           throw TypeError('addScrollListener: First argument must be a function.');
        }
    }
    window.removeScrollListener = function(fn) {
        var index = thingey.indexOf(fn);
        if (index !== -1) thingey.splice(index, 1);
    }
})();

#2

Thought I would add this as an answer even though it's old. The event you are trying to recreate I believe is synonymous to debounce. This is available in underscore.js

我以为我会把它作为答案添加,即使它已经过时了。您尝试重新创建的事件我认为是去抖动的同义词。这可以在underscore.js中找到

debounce_.debounce(function, wait, [immediate]) Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized, and so on.

debounce_.debounce(function,wait,[immediate])创建并返回传递函数的新去抖版本,该版本将推迟执行,直到自上次调用后经过等待毫秒数。用于实现仅在输入停止到达后才会发生的行为。例如:呈现Markdown注释的预览,在窗口停止调整大小后重新计算布局,等等。

So it will wait after your last execution of the specific event. if you do not want a delay, you can just specify 0. David Walsh has a pretty nice implementation you can include in any project.

所以它会在你上次执行特定事件后等待。如果你不想要延迟,你可以指定0. David Walsh有一个非常好的实现,你可以包含在任何项目中。

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Which you can go ahead adding by doing

通过这样做你可以继续添加

var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
}, 250);

window.addEventListener('scroll', myEfficientFn);

#3

Description

You can use the nice jQuery plugin Special scroll events for jQuery by James Padoley.

您可以使用James Padoley的jQuery插件特别滚动事件为jQuery。

Works really great.

工作真的很棒。

Check out the page and this jsFiddle Demonstration (Just scroll ;))

看看页面和这个jsFiddle演示(只是滚动;))

More Information

• Special scroll events for jQuery

jQuery的特殊滚动事件

• jsFiddle Demonstration