javascript - 如何在 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 指出的那样。