關(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)瀏覽器認識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值差異性調(diào)用的方式也很方便簡單的,只要跟普通的對象調(diào)用方式一樣.
這個也可以直接用在textarea或div獲取scrollTop,scrollLeft上的,只要后面?zhèn)鬟M一個dom對象即可.
document.documentElement.scrollTop這個,但在chrome下這個值為0.
在有文檔聲明的情況下,也就是第一行有個dtd聲明,標(biāo)準(zhǔn)瀏覽器認識document.documentElement.scrollTop,可chrome竟然不認識這斯.在沒有文檔聲明的情況下,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一個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彈出框進化版 拖拽小框架發(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)文章
使用TypeScript實現(xiàn)一個類型安全的EventBus示例詳解
EventBus是工作中常用的工具,本文用Typescript實現(xiàn)一個具備基礎(chǔ)功能且類型安全的EventBus，是我近期學(xué)習(xí)Typescript的知識總結(jié)，對TypeScript實現(xiàn)EventBus相關(guān)知識感興趣的朋友一起看看吧2022-06-06
JavaScript 存在陷阱 刪除某一區(qū)域所有節(jié)點
實現(xiàn)功能:刪除某一區(qū)域中所有節(jié)點。2010-05-05
Javascript Request獲取請求參數(shù)如何實現(xiàn)
使用Javascript Request獲取參數(shù)的時候總是提示出錯，本文為此問題提供詳細的解決方案，需要了解的朋友可以參考下2012-11-11
淺析javascript異步執(zhí)行函數(shù)導(dǎo)致的變量變化問題解決思路
下面小編就為大家?guī)硪黄獪\析javascript異步執(zhí)行函數(shù)導(dǎo)致的變量變化問題解決思路。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-05-05
動畫,從人群中脫穎而出、吸引訪客注意力的絕佳方式,本文將給大家分享10 個功能強大的 JavaScript 動畫庫,有了這 10 個功能強大的 JavaScript 庫,創(chuàng)建動畫再簡單不過了,感興趣的同學(xué)可以參考閱讀2023-09-09
js生成1到100的隨機數(shù)最簡單的實現(xiàn)方法
在本篇文章里小編給大家整理了關(guān)于js生成1到100的隨機數(shù)最簡單的實現(xiàn)方法，有需要的朋友們可以學(xué)習(xí)下。2020-02-02
獲取焦點時,利用js定時器設(shè)定時間執(zhí)行動作
網(wǎng)上有很多類似的知識，并不是有什么難度的技巧，僅僅是開發(fā)過程中的一點點積累而已。2010-04-04
下面小編就為大家?guī)硪黄猨s方法數(shù)據(jù)驗證的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
javascript字典探測用戶名工具...2006-10-10
javascript將數(shù)組插入到另一個數(shù)組中的代碼
下面的代碼主要功能就是將數(shù)組arr2插入到數(shù)組arr1的index位置，需要的朋友可以參考下2013-01-01