如何在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);
});

将该数字舍入为例如两位小数可能很有用。然后，使用

scrollPercentage.toFixed(2);

---

修改：更好地使用

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

正如@Blazemonger指出的那样。