javascript - 使用 jQuery，如何将 "scroll counter"添加到我的页面？

Question

我想在我的页面底部有一个滚动计数器。

类似于:“嘿，你刚刚滚动了 1278 像素”，并且每次滚动时滚动编号都会更新。

仅显示我想要实现的目标的无效代码段:

$myPage.on('scroll', function(){
    $('#myCounter').html(newScrollValueCalculatedSomehow);
})

澄清一下:我不想看到滚动的像素数，而是“总行进距离”。如果我继续随着滚动条上下移动，我希望计数器不断增加。

Answer 1

这是一个简单的例子:

http://jsfiddle.net/xs0o095r/

保留一个“总滚动”计数器并将其递增 abs(current - last)

var scrolled = 0;
var lastScrolled = 0;
$(document).on('scroll', function (evt) {
    var pos = $(document).scrollTop();
    scrolled += Math.abs(pos - lastScrolled);
    lastScrolled = pos;
    $('#scrolled').html(scrolled);
});