關於scrollLeft,scrollTop的瀏覽器相容性測試_javascript技巧

今天在修改原群組彈窗的時候,發現彈窗在谷歌瀏覽器chrome下的位置跟在別的瀏覽器下不一樣.逐一排查,肯定是在計算窗口位置的時候,少加了scrollTop這個值.在查看原始程式碼的時候發現直接採用

document.documentElement.scrollTop這個,但在chrome下這個值為0.

在有文檔聲明的情況下,也就是第一行有個dtd聲明,標準瀏覽器認識document.documentElement.scrollTop,可chrome竟然不認識這斯.在沒有文件聲明的情況下,chrome,safari還是可以讀取到scrollTop值.因為chrome是透過document.body .scrollTop取得值的.

解決這個問題:不用去那麼麻煩去判斷瀏覽器類別,因為在不同情況下,document.body、document.documentElement都有可能獲取到不同的值的特點.問題就很好解決.
在獲取瀏覽器或某div的scrollTop或scrollLeft時，我封裝了一個方法:

複製代碼 程式碼如下:

var ueScroll=(function(){
//取得scrollX
function scrollX(ele){
var element= || document .body;
return element.scrollLeft || (document.documentElement && document.documentElement.scrollLeft);
}
//取得scrollY
function scrollY( ele || document.body;
return element.scrollTop || (document.documentElement && document.documentElement.scrollTop);
}
return {
left:scrollX, }
})()


在DEMO中各瀏覽器獲取scrollTop,scrollLeft值差異性調用的方式也很方便簡單的,只要跟普通的對象調用方式一樣跟普通的對象調用方式一樣跟普通的對象調用方式一樣.

這個也可以直接用在textarea或div獲取scrollTop,scrollLeft上的,只要後面傳進一個dom對象即可.