問(wèn)題描述

針對(duì)獲取頁(yè)面的垂直滾動(dòng)條的位置，IE Firefox Opera 標(biāo)準(zhǔn)模式下使用 document.documentElement.scrollLeft 獲取頁(yè)面的水平滾動(dòng)條位置，而混雜模式下則是使用 document.body.scrollLeft。Chrome Safari 在兩種文檔模式下均使用 document.body.scrollLeft 獲取頁(yè)面的水平滾動(dòng)條位置。同理，針對(duì)獲取頁(yè)面的水平滾動(dòng)條的位置的情況與上面類似。

造成的影響

在混雜模式下，由于所有瀏覽器均使用 document.body.scrollTop 獲取頁(yè)面的垂直滾動(dòng)條的位置，所以不會(huì)出現(xiàn)兼容性問(wèn)題。而在標(biāo)準(zhǔn)模式下，由于 Chrome 與 Safari 仍然使用 document.body.scrollTop，而對(duì)于 document.documentElement.scrollTop 返回為 0。這時(shí)如果僅僅使用 document.documentElement.scrollTop 獲取頁(yè)面垂直滾動(dòng)條頂端位置，則在 Chrome 和 Safari 中就會(huì)因?yàn)橛谰梅祷?0 導(dǎo)致頁(yè)面運(yùn)行異常（如，絕對(duì)定位的元素不能隨頁(yè)面的滾動(dòng)條而滾動(dòng)或位置有誤）。對(duì)于獲取頁(yè)面的水平滾動(dòng)條的位置，情況與上面描述類似。

受影響的瀏覽器

所有瀏覽器

解決方案

使用 "||" 邏輯語(yǔ)句將這兩種獲取方式相連，以保證兼容性。如：
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;