關(guān)于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聲明,標(biāo)準(zhǔn)瀏覽器認(rèn)識document.documentElement.scrollTop,可chrome竟然不認(rèn)識這斯.在沒有文檔聲明的情況下,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值差異性調(diào)用的方式也很方便簡單的,只要跟普通的對象調(diào)用方式一樣.
這個也可以直接用在textarea或div獲取scrollTop,scrollLeft上的,只要后面?zhèn)鬟M(jìn)一個dom對象即可.
document.documentElement.scrollTop這個,但在chrome下這個值為0.
在有文檔聲明的情況下,也就是第一行有個dtd聲明,標(biāo)準(zhǔn)瀏覽器認(rèn)識document.documentElement.scrollTop,可chrome竟然不認(rèn)識這斯.在沒有文檔聲明的情況下,chrome,safari還是可以讀取到scrollTop值.因為chrome是通過document.body.scrollTop獲取值的.
解決這個問題:不用去那么麻煩去判斷瀏覽器類別,因為在不同情況下,document.body、document.documentElement都有可能獲取到不同的值的特點.問題就很好解決.
在獲取瀏覽器或某div的scrollTop或scrollLeft時，我封裝了一個方法:
復(fù)制代碼 代碼如下:
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值差異性調(diào)用的方式也很方便簡單的,只要跟普通的對象調(diào)用方式一樣.
這個也可以直接用在textarea或div獲取scrollTop,scrollLeft上的,只要后面?zhèn)鬟M(jìn)一個dom對象即可.
您可能感興趣的文章:
- 淺談jQuery頁面的滾動位置scrollTop、scrollLeft
- js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差別介紹
- jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
- js實現(xiàn)拖拽效果
- 百度Popup.js彈出框進(jìn)化版 拖拽小框架發(fā)布 兼容IE6/7/8,Firefox,Chrome
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性
- 關(guān)于js拖拽上傳 [一個拖拽上傳修改頭像的流程]
- javascript支持firefox,ie7頁面布局拖拽效果代碼
- JavaScript限制在客戶區(qū)可見范圍的拖拽(解決scrollLeft和scrollTop的問題)（2）
相關(guān)文章
寫了一個layout，拖動條連貫，內(nèi)容區(qū)可為iframe
寫了一個layout，拖動條連貫，內(nèi)容區(qū)可為iframe...2007-08-08
有時候我們經(jīng)?？吹接行゜log出現(xiàn)一些點擊頁面出現(xiàn)小紅心的效果，很是喜歡，這里就為大家分享一下代碼直接引用即可2018-05-05
本篇文章主要是對js日期、星座的級聯(lián)顯示代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
leaflet是領(lǐng)先的開源JavaScript庫為移動設(shè)備設(shè)計的互動地圖。接下來通過本文來給大家介紹下leaflet的開發(fā)入門教程，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了javascript操作ul中l(wèi)i的方法,可實現(xiàn)鼠標(biāo)經(jīng)過li標(biāo)簽項對應(yīng)改變背景色的功能,涉及javascript鼠標(biāo)事件及頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
本文介紹了JSscript標(biāo)簽有哪些屬性,向HTML頁面中插入JavaScript的主要方法,就是使用script>元素.這個元素由Netscape創(chuàng)造并在NetscapeNavigator2中首先實現(xiàn).后來,這個元素被加入到正式的HTML規(guī)范中,下面小編來講解下JSscript標(biāo)簽有哪些屬性,需要的朋友可以參考下2022-01-01
解析javascript圖片懶加載與預(yù)加載的分析總結(jié)
本篇文章介紹了javascript圖片懶加載與預(yù)加載的分析，詳細(xì)的介紹了懶加載和預(yù)加載的問題，有需要的可以了解一下。2016-10-10
iScroll是我們在做手機網(wǎng)頁中常用的滑動控件之一。單說其功能已相當(dāng)豐富。但個別時候也是會掉坑的，正好這次就遇上了。在android的app中嵌入網(wǎng)頁時不少手機會出現(xiàn)一次點擊兩次觸發(fā)的現(xiàn)象。經(jīng)過一段時間的折騰，總算想到了一個還算合理的解決放案。2015-03-03
jQuery.extend()的實現(xiàn)方式詳解及實例
extend()函數(shù)是jQuery的基礎(chǔ)函數(shù)之一，作用是擴展現(xiàn)有的對象2013-06-06
JS控制CSS樣式的方法...2007-10-10