对此的显而易见的答案是简单地将事件附加到滚动事件:

var scrolled = false;

$(window).scroll(function() {
   if($(window).scrollTop() > 0) {
       scrolled = true;
   } else {
       scrolled = false;
   }
});

var didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        // Check your page position
    }
}, 250);

最佳答案

我不想与 jQuery 的创建者争论，但拥有聪明的头脑并不一定意味着你当然总是对的。在滚动上使用延迟可能会破坏基于事件的任何动画。我花了大量时间研究滚动事件并基于它制作插件和演示，这似乎有点像一个城市神话，它经常触发大多数设备。

这是一个测试数量的小演示 ​​- 最大值似乎是显示刷新率:

Codepen

除非浏览器启用了平滑滚动，否则鼠标滚轮或平移只会导致触发单个事件。即使情况并非如此，大多数机器都配备精良，可以在帧速率允许的范围内处理尽可能多的调用 - 前提是网页的其余部分构建良好。

最后一点是最大的问题，浏览器可以在很小的时间间隔内处理相当多的脚本，但最能减慢执行速度的是编写糟糕的标记。因此，最大的瓶颈往往是重绘。使用开发人员工具时可以很好地检查这一点。

一些例子是有大块的固定位置元素和动画不是基于 transform但改用像素值。两者都会触发不必要的重绘，这对性能有巨大的影响。这些问题与滚动触发的频率没有直接关系。

使用固定位置元素，可以通过以下 hack 防止在 webkit 相关浏览器上重绘:

.fixed {
  -webkit-backface-visibility: hidden;
}

$(function() {

var flag, modern = window.requestAnimationFrame;

$(window).scroll(function() {

    if (!$(this).scrollTop()) {

        if (flag) {
        if (modern) requestAnimationFrame(doSomething);
        else doSomething();
        flag = false;
        }
    }
    else if (!flag) {

        if (modern) requestAnimationFrame(doMore);
        else doMore();
        flag = true;
    }
});

function doSomething() {

    // special magic
}

function doMore() {

    // other shenanigans
}
});

$(function() {

var modern = window.requestAnimationFrame;

$(window).scroll(function() {

    var flag = $('#element').hasClass('myclass');

    if (!$(this).scrollTop()) {

        if (flag) {
        if (modern) requestAnimationFrame(doSomething);
        else doSomething();
        $('#element').removeClass('myclass');
        }
    }
    else if (!flag) {

        if (modern) requestAnimationFrame(doMore);
        else doMore();
        $('#element').addClass('myclass');
    }
});

function doSomething() {

    // special magic
}

function doMore() {

    // other shenanigans
}
});

$(function() {

var doit, modern = window.requestAnimationFrame;

$(window).scroll(function() {

    clearTimeout(doit);

    doit = setTimeout(function() {

        if (modern) requestAnimationFrame(doSomething);
        else doSomething();

    }, 50);
});

function doSomething() {

    // stuff going on
}
});

$(window).scroll($.restrain(50, someFunction));

(function(window, undefined) {

var $ = window.jQuery;

$.restrain = function(delay, callback) {

    var executed = 0;

    function moduleWrap() {

        var elapsed = Date.now()-executed;

        function runIt() {

            executed = Date.now();
            callback.apply(this, arguments);
        }

        if (elapsed > delay) runIt();
    }

    return moduleWrap;
};
})(this);

$(window).on('load', function() {

    setTimeout(function() {

        // check scroll position and set flag

    }, 20);
});

关于javascript - 检测用户是否已从顶部滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33257095/