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?

<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.