關于scrollLeft,scrollTop的瀏覽器兼容性測試

更新時間：2013年03月19日 16:10:35 作者：

彈窗在谷歌瀏覽器chrome下的位置跟在別的瀏覽器下不一樣，接下來介紹下scrollLeft,scrollTop的瀏覽器兼容性，感興趣的你可以參考下哈

今天在修改原群組彈窗的時候,發(fā)現(xiàn)彈窗在谷歌瀏覽器chrome下的位置跟在別的瀏覽器下不一樣.逐一排查,肯定是在計算窗口位置的時候,少加了scrollTop這個值.在查看源代碼的時候發(fā)現(xiàn)直接采用

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上的,只要后面?zhèn)鬟M一個dom對象即可.

您可能感興趣的文章:

寫了一個layout，拖動條連貫，內容區(qū)可為iframe
寫了一個layout，拖動條連貫，內容區(qū)可為iframe...
2007-08-08
頁面點擊小紅心js實現(xiàn)代碼
有時候我們經?？吹接行゜log出現(xiàn)一些點擊頁面出現(xiàn)小紅心的效果，很是喜歡，這里就為大家分享一下代碼直接引用即可
2018-05-05
js日期、星座的級聯(lián)顯示代碼
本篇文章主要是對js日期、星座的級聯(lián)顯示代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
leaflet的開發(fā)入門教程
leaflet是領先的開源JavaScript庫為移動設備設計的互動地圖。接下來通過本文來給大家介紹下leaflet的開發(fā)入門教程，需要的朋友可以參考下
2016-11-11
javascript操作ul中l(wèi)i的方法
這篇文章主要介紹了javascript操作ul中l(wèi)i的方法,可實現(xiàn)鼠標經過li標簽項對應改變背景色的功能,涉及javascript鼠標事件及頁面元素屬性的相關操作技巧,需要的朋友可以參考下
2015-05-05
JSscript標簽有哪些屬性
本文介紹了JSscript標簽有哪些屬性,向HTML頁面中插入JavaScript的主要方法,就是使用script>元素.這個元素由Netscape創(chuàng)造并在NetscapeNavigator2中首先實現(xiàn).后來,這個元素被加入到正式的HTML規(guī)范中,下面小編來講解下JSscript標簽有哪些屬性,需要的朋友可以參考下
2022-01-01
解析javascript圖片懶加載與預加載的分析總結
本篇文章介紹了javascript圖片懶加載與預加載的分析，詳細的介紹了懶加載和預加載的問題，有需要的可以了解一下。
2016-10-10
iScroll中事件點擊觸發(fā)兩次解決方案
iScroll是我們在做手機網頁中常用的滑動控件之一。單說其功能已相當豐富。但個別時候也是會掉坑的，正好這次就遇上了。在android的app中嵌入網頁時不少手機會出現(xiàn)一次點擊兩次觸發(fā)的現(xiàn)象。經過一段時間的折騰，總算想到了一個還算合理的解決放案。
2015-03-03
jQuery.extend()的實現(xiàn)方式詳解及實例
extend()函數(shù)是jQuery的基礎函數(shù)之一，作用是擴展現(xiàn)有的對象
2013-06-06
JS控制CSS樣式的方法
JS控制CSS樣式的方法...
2007-10-10