如何让JavaScript的HTML元素的水平滚动百分比是多少？(How to get horizo

我们该如何计算“距离”的起点和终点之间的元件上覆盖的滚动条的百分比是多少？

<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指出。

文章来源: How to get horizontal scrolling percentage of an HTML element in JavaScript?