Jak uzyskać przewijanie w poziomie procentowego elementu HTML w JavaScript?

Question

Jak można obliczyć procent "odległości" pokrytej przez pasek przewijania elementu między początkiem i końcem?

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

Tak więc, jeśli pasek przewijania jest całkowicie po lewej chcemy uzyskać 0, a jeśli jest to całkowicie po prawej chcemy uzyskać 100.

Answer 1

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

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

Lub, jeśli naprawdę muszą używać jQuery:

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

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

Answer 2

Zobacz tutaj: http://jsfiddle.net/vWDfb/1/

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

To może być użyteczne zaokrąglić tę liczbę do, na przykład, dwóch miejsc po przecinku. Następnie użyj

scrollPercentage.toFixed(2); 

---

Edycja: Lepsze wykorzystanie

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

jak @Blazemonger zauważył.