获取滚动位置的百分比

Question

问题：

计算的数学公式是什么（无论是什么 文档的scrollHeight）滚动条底部与其总底部的距离（这将是页面的末尾）。因此，例如，当滚动条位于顶部时，我会说从文档底部开始，它的底部百分比距离 0％，当它位于＆＃39 ; s完全滚动（垂直），它将 100％。

我的目标：

我的目标是计算底部和特定位置之间有多少像素，相对于视口而言，相对于视口，高于底部。同样，文档高度应该没有任何意义。如果相对于视口，则3％为3％。

已知变量：

var P              = 3 // in %
var totalHeight    = document.documentElement.scrollHeight;
var viewportHeight = document.documentElement.clientHeight;

Answer 1

返回0到100之间相对于滚动位置的数字：

document.onscroll = function(){ 
  var pos = showPosition(document.body);
  console.clear();
  console.log( Math.round(pos) + '%' )
};

function showPosition(elm){
    var parent = elm.parentNode,
        pos = (elm.scrollTop || parent.scrollTop) / (parent.scrollHeight - parent.clientHeight ) * 100;
    
    return pos;   
};

body{ height:2000px; }

Answer 2

滚动到底部时，最终位置值等于文档的高度减去一个屏幕（视口）的高度。所以，如果你计算：

scrollPositionRelative = scrollPosition / (documentHeight - viewportHeight);

值将按预期在0-1范围内。

这里是最后给出的例子中使用的函数。

function getScrollPosition () {
  var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); // Viewport height (px)
  var scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // Current scroll position (px)
  var documentHeight = $(document).height(); // Document height (px)
  var scrollPositionRelative = scrollPosition / (documentHeight - viewportHeight); // The document height is reduced by the height of the viewport so that we reach 100% at the bottom
  return {
    documentHeight: documentHeight,
    relative: scrollPositionRelative,
    absolute: scrollPositionRelative * documentHeight // Yields an "average" pixel position
  };
}

查看实际操作：http://jsbin.com/tawana/1/