使用jQuery，如何在页面中添加“滚动计数器”？

Question

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

类似于：＆＃34;嘿，你刚刚滚动了1278px＆＃34;每次滚动时都会更新滚动号。

一个非工作片段，只展示我想要实现的目标：

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

澄清：我不想看到滚动的像素数，但是＆＃34;总行进距离＆＃34;。如果我继续上下滚动，我希望计数器只是增加和增加。

Answer 1

这是一个简单的例子：

http://jsfiddle.net/xs0o095r/

保持＆＃34;总滚动＆＃34;计数器并通过abs（当前 - 最后）递增

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