今天 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 聊聊， 查看更多联系方式
