Come ottenere la percentuale di scorrimento orizzontale di un elemento HTML in JavaScript?

Question

Come possiamo calcolare la percentuale di "distanza" coperta dalla barra di scorrimento su un elemento tra inizio e fine?

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

Quindi, se la barra di scorrimento è completamente a sinistra vogliamo ottenere 0, e se è completamente a destra si desidera ottenere 100.

Answer 1

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

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

Oppure, se proprio deve utilizzare jQuery:

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

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

Answer 2

Guardalo qui: http://jsfiddle.net/vWDfb/1/

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

può essere utile per arrotondare il numero a, ad esempio, due decimali. Quindi, utilizzare

scrollPercentage.toFixed(2); 

---

Modifica: utilizzare meglio

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

come @Blazemonger sottolineato.