如何确定jquery中滚动的px数？

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

例如，在页面中间，我向下滚动了一点。 在这里，我想知道我滚动了多少个

px

。（3px，5px，…，10px，11px？）

无论滚动条的位置如何。

如果我的卷轴从顶部算起是300px。我滚动了10px。所以我的卷轴现在是310px。如何获得我滚动的值（这里：10px？）

可能吗

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

编辑：

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

编辑：

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

---

以下是一个工作示例代码：

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

需要超时以防止scroll事件触发多次并获取不正确的值

---

此示例将打印200毫秒后移动的像素数这是一个工作示例代码：

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

需要超时以防止scroll事件触发多次并获取不正确的值

---

如果我的滚动条从顶部开始为

300px

，此示例将打印200毫秒后移动的像素数。我滚动了

10px

。因此，我的滚动条现在位于

310px

。如何获取我滚动的值（这里：

10px

？）您不能。你可以用mousedown来伪装它，但是如果用户使用了许多其他滚动方式中的一种，比如mouseweel，它将无法工作。您也可以使用超时，但要等待多长时间？滚动需要多长时间，如果用户再次滚动回来怎么办等等。效果很好！但是为什么要使用计时器呢？如果我的滚动条是从顶部开始的

300px

。我滚动了

10px

。因此，我的滚动条现在位于

310px

。如何获取我滚动的值（这里：

10px

？）您不能。你可以用mousedown来伪装它，但是如果用户使用了许多其他滚动方式中的一种，比如mouseweel，它将无法工作。您也可以使用超时，但要等待多长时间？滚动需要多长时间，如果用户再次滚动回来怎么办等等。效果很好！但是你为什么要用定时器呢？疯了！！！它工作得很好！但我有一些问题。为什么要使用setTimeout？为什么要将

startScroll

重置为

0

？@Steffi

setTimeout

是为了防止滚动事件多次触发。如果没有这个，每次用户向下滚动时，您都会有一个“滚动：1px”多次。将

startScroll

重置为

0

让下一个滚动事件重新初始化

startScroll

疯狂！！！它工作得很好！但我有一些问题。为什么要使用setTimeout？为什么要将

startScroll

重置为

0

？@Steffi

setTimeout

是为了防止滚动事件多次触发。如果没有这个，每次用户向下滚动时，您都会有一个“滚动：1px”多次。将

startScroll

重置为

0

让下一个滚动事件重新初始化

startScroll