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

Question

I would like to have a scroll counter on the bottom of my page.

Something like: "Hey, you have just scrolled 1278px" and have the scroll number update everytime I scroll.

A non working snippet to just show what I want to achieve:

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

To clarify: I don't want to see the scrolled number of pixels but the "total distance traveled". If I keep going up and down with the scroll, I want the counter to just increase and increase.

Answer 1

Here's a quick example:

http://jsfiddle.net/xs0o095r/

Keep a "total scrolled" counter and increment it by 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);
});