在前端开发中，经常需要根据用户滚动的位置做出响应。尽管所有的浏览器都支持垂直滚动，但是获取滚动位置的方法却因浏览器而异。在本文中，我们将介绍一种跨浏览器的方法，可以在 JavaScript 中确定页面的垂直滚动百分比。
获取垂直滚动位置
首先，让我们看一下如何获取页面的垂直滚动位置。
在大多数现代浏览器中，我们可以通过 window.scrollY 或 window.pageYOffset 属性来获取当前滚动位置。例如：
const scrollPosition = window.scrollY || window.pageYOffset;
然而，对于一些较老版本的 IE 浏览器，这两个属性并不受支持。相反，IE 使用 document.documentElement.scrollTop 或 document.body.scrollTop 属性来获取垂直滚动位置。为了兼容所有浏览器，我们需要结合使用这些属性：
const scrollPosition = window.scrollY ||
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;现在我们已经知道如何获取页面的垂直滚动位置，接下来我们将找出如何计算滚动百分比。
计算垂直滚动百分比
要计算滚动百分比，我们需要知道页面的总高度以及当前可见区域的高度。在大多数情况下，我们可以使用 document.documentElement.scrollHeight 属性来获取页面的总高度，并使用 window.innerHeight 属性来获取当前可见区域的高度。例如：
const totalHeight = document.documentElement.scrollHeight; const visibleHeight = window.innerHeight;
接下来，我们可以将当前滚动位置与页面总高度和可见区域高度进行比较，从而计算出垂直滚动百分比。具体代码如下：
-- -------------------- ---- -------
----- -------------- - -------------- --
------------------ --
---------------------------------- --
------------------------
----- ----------- - --------------------------------------
----- ------------- - -------------------
----- ------------- - --------------- - ------------ - --------------- - ----现在，我们已经成功地计算出了页面的垂直滚动百分比。
示例代码
下面是一个完整的示例代码，展示如何实现跨浏览器的方法来确定页面的垂直滚动百分比：
-- -------------------- ---- -------
-------- -------------------------- -
----- -------------- - -------------- --
------------------ --
---------------------------------- --
------------------------
----- ----------- - --------------------------------------
----- ------------- - -------------------
------ --------------- - ------------ - --------------- - ----
-
-- -------- ------------------------ --
--------------------------------- -- -- -
----- ------------- - ---------------------------
-----------------------------------------
---结论
在本文中，我们介绍了一种跨浏览器的方法，可以在 JavaScript 中确定页面的垂直滚动百分比。我们讨论了如何获取页面的垂直滚动位置、计算页面总高度和可见区域高度，并使用这些信息来计算滚动百分比。我们还提供了一个示例代码，展示了如何将这些步骤结合起来，并在滚动事件中使用它们。
这些技术对于在 Web 开发中响应用户滚动行为非常有用。无论您是开发网站、Web 应用程序还是手机应用程序，都可以使用这些技术来改善您的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30352