How to get horizontal scrolling percentage of an HTML element in JavaScript?

Question

How can we calculate the percentage of \'distance\' covered by the scrollbar on an element between start and end?

        
                      

              相关标签:
       
      

Answer 1

See it here: http://jsfiddle.net/vWDfb/1/

$('#container').scroll(function(){
    var scrollPercentage = 100*this.scrollLeft/this.scrollWidth/(1-this.clientWidth/this.scrollWidth);
});

It can be useful to round that number to, for example, two decimals. Then, use

scrollPercentage.toFixed(2);

---

Edit: Better use

var scrollPercentage = 100 * this.scrollLeft / (this.scrollWidth-this.clientWidth); 

as @Blazemonger pointed out.

Answer 2

var scrollPercentage = 100 * this.scrollLeft / (this.scrollWidth-this.clientWidth); 

http://jsfiddle.net/vWDfb/3/

Or, if you really must use jQuery:

scrollPercentage = 100 * $(this).scrollLeft() / ($('#contained').width() - $(this).width());

http://jsfiddle.net/vWDfb/5/