¿Cómo obtener el porcentaje de desplazamiento horizontal de un elemento HTML en JavaScript?

Question

¿Cómo podemos calcular el porcentaje de "distancia" cubierto por la barra de desplazamiento en un elemento entre el inicio y el final?

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

lo tanto, si la barra de desplazamiento está completamente a la izquierda queremos obtener 0, y si es completamente a la derecha que quiere conseguir 100.

Answer 1

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

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

O, si realmente debe utilizar jQuery:

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

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

Answer 2

Ver aquí: http://jsfiddle.net/vWDfb/1/

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

Puede ser útil para redondear el número a, por ejemplo, dos decimales. A continuación, utilice

scrollPercentage.toFixed(2); 

---

Editar: un mejor uso

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

como @Blazemonger señaló.