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