如何在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/