用javascript滚动滚动条或鼠标滚轮后引发事件

Fire event after scrollling scrollbars or mousewheel with javascript

本文关键字：事件 鼠标 javascript 滚动 滚动条      更新时间：2023-09-26

我想知道当使用滚动条或鼠标滚轮（或在触摸设备上滑动）时，是否可以在页面滚动之后触发事件。

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

似乎每次用户滚动时都会触发jQuery's.scroll()，并且总是触发一个事件似乎很笨拙。有没有.onScrollAfter()，.onMouseUp()的同义词？

我想知道在不使用框架的情况下这是否可能（或者函数是否已经存在），尽管我会考虑使用框架；尤其是CCD_ 5。

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

示例（概念代码）：

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

我想我会添加这个作为答案，即使它很旧。我相信你试图重现的事件就是debounce的代名词。这在undercore.js 中可用

debounce_.debounce（函数，等待，[立即]）创建并返回传递函数的新的去抖动版本，该版本将推迟其执行，直到自上次调用以来经过了等待毫秒之后。对于实现只应在输入停止到达之后发生的行为非常有用。例如：呈现Markdown注释的预览，在窗口停止调整大小后重新计算布局，等等

因此，它将在您上次执行特定事件之后等待。如果您不希望延迟，可以只指定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);
    };
};

你可以通过继续添加

var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
}, 250);
window.addEventListener('scroll', myEfficientFn);

描述

您可以使用漂亮的jQuery插件James Padoley为jQuery提供的特殊滚动事件。

工作真的很棒。

查看页面和这个jsFiddle演示（只需滚动；）

更多信息

  • jQuery的特殊滚动事件
  • jsFiddle演示
相关文章：