获取滚动位置的百分比

Question

问题：

计算scrollHeight滚动条底部距离其总底部（即页面的末尾）有多远的数学公式 是什么？因此，例如，当滚动条位于顶部时，我会说它底部与文档底部的距离为0%，并且当它完全滚动（垂直）时，它将是100%。

我的目标：

我的目标是计算底部和特定位置之间有多少像素，例如3%，相对于该底部上方的视口。同样，文档高度应该没有任何意义。如果相对于视口，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 = getVerticalScrollPercentage(document.body)
  document.body.innerHTML = "<span>" + Math.round(pos) + "%<span>"
}

function getVerticalScrollPercentage( elm ){
  var p = elm.parentNode
  return (elm.scrollTop || p.scrollTop) / (p.scrollHeight - p.clientHeight ) * 100
}

body{ height:2000px }
span{ position:fixed; font:5em Arial; color:salmon; }

? &之间的区别scrollHeightclientHeight