今天在修改原群組彈窗的時候,發現彈窗在谷歌浏覽器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=ele || document.body;
return element.scrollLeft || (document.documentElement && document.documentElement.scrollLeft);
}
//獲取scrollY
function scrollY(ele){
var element=ele || document.body;
return element.scrollTop || (document.documentElement && document.documentElement.scrollTop);
}
return {
left:scrollX,
top:scrollY
}
})()
在DEMO中各浏覽器獲取scrollTop,scrollLeft值差異性調用的方式也很方便簡單的,只要跟普通的對象調用方式一樣.
這個也可以直接用在textarea或div獲取scrollTop,scrollLeft上的,只要後面傳進一個dom對象即可.