jquery - 如何确定在 jquery 中滚动的像素数？

Question

我想获得px在 jQuery 中滚动时的值。

例如，在页面中间，我向下滚动一点。px在这里，我想知道我滚动了多少。（3像素，5像素，...，10像素，11像素？）

无论滚动条的位置如何。

如果我的滚动条距离顶部 300 像素。我滚动了 10 像素。所以我的滚动条现在是 310px。如何获得我滚动的值（这里：10px？）

是否可以 ？

Answer 1

这是一个工作示例代码：

var startScroll,
    toHandler,
    endScroll;

$(window).on("scroll",function(){
    if (!startScroll) {
        startScroll = $(window).scrollTop();
        console.log("Started:" + startScroll);
    } else {
        if (toHandler) {
            clearTimeout(toHandler)
        }
        toHandler = setTimeout(function(){
            endScroll = $(window).scrollTop();
            console.log("Ended :"+endScroll);
            console.log("Scrolled "+(endScroll-startScroll));
            startScroll = 0;
        },200)
    }
});​

http://jsfiddle.net/Touki/jXwAG/

需要超时以防止滚动事件多次触发并获得不正确的值。

此示例将打印 200 毫秒后它移动了多少像素

Answer 2

$(window).on('scroll', function() {
    var distanceScrolled = $(window).scrollTop();
});

编辑：

使用计时器（绝不准确）：

var timer, lastScrolled = 0;

$(window).on('scroll', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        $('#test').text('you scrolled '+($(window).scrollTop() - lastScrolled)+' pixels')
        lastScrolled = $(window).scrollTop();
    },400);
});​

小提琴