为什么我们需要视口高度来计算滚动百分比？

Question

虽然听起来很简单，但我无法理解计算滚动百分比的概念。

return Math.ceil( ((scrollPosition() + viewportHeight()) / pageHeight()) * 100 );

所以我从在线资源获得了公式，但我不明白为什么我们在上面的公式中需要一个viewportHeight参数？

我肯定遗漏了一些非常基本的东西。

Answer 1

scrollPosition()获取您向下滚动页面的距离，但是，测量是从页面顶部进行的。您需要添加viewportHieght()以从底部进行测量。

让我举个例子（希望这能更好地解释发生了什么）：

• 页面高1000像素
• 视口高200像素
• 用户向下滚动了500px（scrollPosition() == 500px）

scrollPosition()从页面顶部进行测量。这是50%页面下方（500/1000 == 1/2 == 50%）。但是，用户可以看到比视口顶部更远的位置。他们可以一直看到视口的底部。因此，即使他们向下滚动500px，他们也可以看到页面的700px，70%。

正如您所看到的，如果不添加viewportHeight()，您最终会得到一个不同的（更小的，不正确的）结果（50%而不是正确的70%）