How to get horizontal scrolling percentage of an H

Question

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

<div id="container" style="overflow-x:scroll; max-width:1000px;">
  <div id="contained" style="width:3000px;"></div>
</div>

<script>
  $('#container').scroll(function(){
    var scrollPercentage; //How to get scroll percentage?
  });
</script>

So, if the scrollbar is completely at the left we want to get 0, and if it's completely at the right we want to get 100.

Answer 1

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/

Answer 2

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.