JavaScript'te bir HTML öğesinin yatay kaydırma yüzdesi nasıl alınır?

Question

Başlatma ile bitiş arasındaki bir öğedeki kaydırma çubuğunun kapsadığı 'mesafe' yüzdesini nasıl hesaplayabiliriz? kaydırma çubuğu solda tamamen ise

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

Yani, 0 almak istiyorum ve bu hakkı tamamen eğer biz 100 almak istiyorum.

Answer 1

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

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

Veya, gerçekten jQuery kullanmak gerekiyorsa:

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

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

Answer 2

buradan bakınız: http://jsfiddle.net/vWDfb/1/

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

örneğin, iki ondalık sayılar için bu sayıyı yuvarlamak için yararlı olabilir. Ardından,

scrollPercentage.toFixed(2); 

---

Edit kullanın: @Blazemonger belirttiği gibi iyi

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

kullanın.