जावास्क्रिप्ट में एक 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); 
}); 

यह है कि संख्या पूर्णांक बनाना उपयोगी हो सकता है, उदाहरण के लिए, दो दशमलव। फिर, का उपयोग

scrollPercentage.toFixed(2); 

---

संपादित: बेहतर

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

का उपयोग के रूप में @Blazemonger बताया।