JavaScriptでHTML要素の水平スクロール率を取得するにはどうすればよいですか？

Question

開始点と終了点の間で要素上のスクロールバーでカバーされる「距離」の割合をどのように計算できますか？だから、

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

、スクロールバーが左側に完全であれば、我々は0を取得したい、そしてそれは右で完全だ場合、私たちは100を取得したいです。

Answer 1

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

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

それとも、あなたが本当にjQueryのを使用する必要がある場合：

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

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

Answer 2

ここでそれを参照してください。http://jsfiddle.net/vWDfb/1/

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

例えば、小数点以下2桁にその数を丸めるすると便利です。その後、編集

scrollPercentage.toFixed(2); 

---

を使用します。@Blazemongerが指摘したようにより良い

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

を使用しています。