在前端开发中，我们经常需要使用到 document.body.scrollTop 来获取页面滚动条的位置。但是，在火狐浏览器中，使用该属性时会出现一个问题：它总是返回0。
问题描述
当我们在火狐浏览器中使用 document.body.scrollTop 获取滚动条位置时，无论页面是否有滚动，它都会返回0。这个问题让我们无法准确地获取页面的滚动状态，从而影响一些特定场景下的功能实现。
问题原因
造成这个问题的原因，是因为在标准模式下（即使用 <!DOCTYPE html> 声明的文档类型），document.body 的 scrollTop 属性表示的是文档元素（<html>）滚动的距离，而不是 body 元素。而在混杂模式下（即没有声明文档类型），document.body 的 scrollTop 属性则表示 body 滚动的距离。
但是，对于火狐浏览器来说，即使在标准模式下，document.body 的 scrollTop 属性仍然会返回 0，这与其他浏览器的表现不同。
解决方案
针对该问题，我们可以采用如下的解决方案：
- 判断浏览器是否为火狐浏览器，如果是，则使用
document.documentElement.scrollTop获取滚动条位置。 - 如果不是火狐浏览器，则优先使用
document.documentElement.scrollTop获取滚动条位置，若其返回值为 0，则使用document.body.scrollTop获取。
示例代码如下：
-------- -------------- -
--- --------- - --
-- --------------------------------------- - --- -
--------- - -----------------------------------
- ---- -
--------- - ---------------------------------- -- ------------------------
-
------ ----------
-学习和指导意义
本文介绍了火狐浏览器中 document.body.scrollTop 总是返回 0 的问题，并提出了解决方案。这个问题虽然只是一个小问题，但却与浏览器的标准模式、混杂模式等相关，能够帮助我们更深入地理解前端开发中的一些基础概念。
同时，本文也告诫我们，在编写前端代码时，尽量避免使用一些容易出现兼容性问题的属性和方法，以免引起不必要的麻烦和工作量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14409