在前端开发中，经常需要使用 JavaScript 操作滚动条。其中 scrollTop 属性用于获取或设置页面在垂直方向上滚动的距离。然而，由于不同浏览器的实现方式存在差异，因此检测 scrollTop 属性也需要跨浏览器兼容。
检测 scrollTop 跨浏览器的方法
要跨浏览器检测 scrollTop 属性，可以结合以下两种方法：
方法一：通过 document.documentElement.scrollTop 或 document.body.scrollTop 检测
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
该方法首先判断 document.documentElement 是否存在，并获取其 scrollTop 属性值；如果不存在，则获取 document.body 的 scrollTop 属性值。这样做能够兼容大多数主流浏览器。
方法二：通过 window.pageYOffset 检测
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
该方法首先尝试获取 window.pageYOffset 属性值，如果获取失败，则按照方法一的方式获取 document.documentElement 或 document.body 的 scrollTop 属性值。这种方法同样可以适用于各种主流浏览器。
示例代码
下面是一个简单的示例，在页面滚动时输出当前的 scrollTop 值：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ----------
-------
----- ---------------------------
---- -------------- ---------------
------- -----------------------
-------- --------------- -
--- --------- - ------------------------- -- ----------------------------------- -- ------------------------
-----------------------
-
---------
-------
-------在该示例中，当页面滚动时，会触发 showScrollTop 函数，并获取当前的 scrollTop 值。可以通过浏览器的控制台查看输出结果。
结语
本文介绍了跨浏览器检测 scrollTop 属性的两种方法，并给出了一个简单的示例。在实际开发中，需要根据具体情况选择合适的方法进行操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13405