document.documentElement.scrollLeft 与document.body.scrollTop区别

问题描述

针对获取页面的垂直滚动条的位置，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;