關(guān)于scrollLeft,scrollTop的瀏覽器兼容性測試

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

彈窗在谷歌瀏覽器chrome下的位置跟在別的瀏覽器下不一樣，接下來介紹下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)識document.documentElement.scrollTop,可chrome竟然不認(rèn)識這斯.在沒有文檔聲明的情況下,chrome,safari還是可以讀取到scrollTop值.因?yàn)閏hrome是通過document.body.scrollTop獲取值的.

解決這個(gè)問題:不用去那么麻煩去判斷瀏覽器類別,因?yàn)樵诓煌闆r下,document.body、document.documentElement都有可能獲取到不同的值的特點(diǎ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)用的方式也很方便簡單的,只要跟普通的對象調(diào)用方式一樣.

這個(gè)也可以直接用在textarea或div獲取scrollTop,scrollLeft上的,只要后面?zhèn)鬟M(jìn)一個(gè)dom對象即可.

您可能感興趣的文章:

相關(guān)文章

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