scrollTop 的浏览器兼容问题

今天 React QQ 群 (191059493) 里一位大神发现我写的处女 React 组件在 Firefox 下没有效果。

var scrollTop = document.getElementsByTagName("body")[0].scrollTop;

scrollTop 即页面元素与当前窗口可见区域的顶端的距离。
通过打印日志调试，发现 scrollTop 的值在 Firefox 下始终为 0，而在 Chrome 和 Safari 下正常。

修正为

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

则运行正常。经测试, 在 Firefox 下 document.body.scrollTop 始终为0，在 Chrome Safari 下 document.documentElement.scrollTop 始终为0.

若使用 jQuery, 则为

var scrollTop = $('html').scrollTop() || $('body').scrollTop();

或者

var scrollTop = $('html,body').scrollTop();

document.body 和 document.documentElement 分别代表什么

在浏览器 console 里执行

> document.body
< <body>...</body>

> document.getElementByTagName('body')[0]
< <body>...</body>

可以看到这两个实际是一致的

而

> document.documentElement
< <html>...</html>

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”，查看更多联系方式