问题描述
针对获取页面的垂直滚动条的位置,IE Firefox Opera 标准模式下使用 document.documentElement.scrollLeft 获取页面的水平滚动条位置,而混杂模式下则是使用 document.body.scrollLeft。Chrome Safari 在两种文档模式下均使用 document.body.scrollLeft 获取页面的水平滚动条位置。同理,针对获取页面的水平滚动条的位置的情况与上面类似。
造成的影响
在混杂模式下,由于所有浏览器均使用 document.body.scrollTop 获取页面的垂直滚动条的位置,所以不会出现兼容性问题。而在标准模式下,由于 Chrome 与 Safari 仍然使用 document.body.scrollTop,而对于 document.documentElement.scrollTop 返回为 0。这时如果仅仅使用 document.documentElement.scrollTop 获取页面垂直滚动条顶端位置,则在 Chrome 和 Safari 中就会因为永久返回 0 导致页面运行异常(如,绝对定位的元素不能随页面的滚动条而滚动或位置有误)。对于获取页面的水平滚动条的位置,情况与上面描述类似。
受影响的浏览器
所有浏览器
解决方案
使用 "||" 逻辑语句将这两种获取方式相连,以保证兼容性。如:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;