詳解頁面滾動值scrollTop在FireFox與Chrome瀏覽器間的兼容問題
最近做了個(gè)項(xiàng)目，其中有一目錄功能，發(fā)現(xiàn)一個(gè)在現(xiàn)代瀏覽器間的一個(gè)bug，或是稱之為差異，即頁面滾動值(scrollTop)的獲取與設(shè)定。
在此之前先說一下關(guān)于頁面元素的坐標(biāo)獲取，這張圖的經(jīng)典性不必再提。
實(shí)現(xiàn)滾動到某位置功能
博客目錄的一個(gè)最主要的功能就是實(shí)現(xiàn)點(diǎn)擊標(biāo)題頁面滾動，因?yàn)槲覀円獫L動到頁面某個(gè)標(biāo)題，所以需要計(jì)算出滾動這個(gè)元素的具體絕對位置，而常用的offsetTop是獲取到當(dāng)前元素與之最近的決定其定位的元素的偏移量，此處不適用。
此處應(yīng)使用瀏覽器原生提供的 getBoundingClientRect 接口，此函數(shù)返回的是元素距離瀏覽器各邊距的絕對位置，跟是什么定位類型的無關(guān)，非常適合制作頁面滾動效果。
關(guān)于getBoundingClientRect函數(shù)的具體用法可以參見以下鏈接：鏈接1，鏈接2。
獲取滾動需要的數(shù)據(jù)， body 的 scrollTop 即頁面已經(jīng)被滾動所隱藏的高度，再根據(jù)上面提到的接口獲取元素距離瀏覽器頂部的距離，可以算出需要的滾動的高度，關(guān)系圖如下：
遂，頁面要滾動到的位置就是：
document.body.scrollTop+element.getBoundingClientRect().top;
這里順帶說下 getBoundingClientRect().top 獲取的元素在被滾動隱藏與非滾動時(shí)的區(qū)別：
如上圖可以看出，即使要滾動到的元素部分在瀏覽器邊界外，獲取到的top即為負(fù)數(shù)，遂計(jì)算出來的頁面高度依然是正確的。
點(diǎn)擊目錄跳轉(zhuǎn)的功能就做完了，至今為止都很完美。
FireFox與Chrome的scrollTop的兼容問題
直到我今天在FireFox測試時(shí)發(fā)現(xiàn)，火狐下頁面滾動的跳轉(zhuǎn)功能無法使用。
1、原生接口測試
這里先提一下：
document.documentElement 即 <html> 元素，而 document.body 即 <body> 元素。
測試結(jié)果，在火狐上只能通過html元素來獲取和設(shè)定頁面滾動高度，而在谷歌上反之只能用body元素來獲取和設(shè)定。
2、jquery接口測試
上面是使用原生的scrollTop屬性來獲取與設(shè)定，而jquery自己也實(shí)現(xiàn)了對scrollTop屬性的封裝，可以試試他的兼容性。
發(fā)現(xiàn)采用 $(document) 可以實(shí)現(xiàn)對獲取和設(shè)定scrollTop的兼容，大喜。
3、scrollTop動畫實(shí)現(xiàn)測試
雖然實(shí)現(xiàn)了兼容，但為了有更好的效果，我希望采用動畫的方式滾動到頁面的某位置，而不是直接跳轉(zhuǎn)，這里采用jquery的 animate 函數(shù)來實(shí)現(xiàn)。
發(fā)現(xiàn)雖然可以采用$(document)來實(shí)現(xiàn)獲取和設(shè)定，但動畫效果都無法使用，還是只能用body元素和html元素來實(shí)現(xiàn)。
最終解決方案
遂最完美的實(shí)現(xiàn)方案是：
獲取或直接設(shè)定當(dāng)前頁面滾動高度：
$(document).scrollTop();//獲取，兼容火狐谷歌
有動畫效果的設(shè)定當(dāng)前頁面滾動高度：
$("body,html").animate({ scrollTop: ... });//動畫滾動效果，兼容火狐谷歌
最終效果可以點(diǎn)擊本篇文章頂部的目錄鏈接來查看效果：
jQuery CSS 操作 - scrollTop() 方法
實(shí)例
設(shè)置 <div> 元素中滾動條的垂直偏移：
$(".btn1").click(function(){
$("div").scrollLeft(100);
});
定義和用法
scrollTop() 方法返回或設(shè)置匹配元素的滾動條的垂直位置。
scroll top offset 指的是滾動條相對于其頂部的偏移。
如果該方法未設(shè)置參數(shù)，則返回以像素計(jì)的相對滾動條頂部的偏移。
語法
$(selector).scrollTop(offset)
| 參數(shù) | 描述 |
|---|---|
| offset | 可選。規(guī)定相對滾動條頂部的偏移，以像素計(jì)。 |
提示和注釋
注釋：該方法對于可見元素和不可見元素均有效。
注釋：當(dāng)用于獲取值時(shí)，該方法只返回第一個(gè)匹配元素的 scroll top offset。
注釋：當(dāng)用于設(shè)置值時(shí)，該方法設(shè)置所有匹配元素的 scroll top offset。
- top、clientTop、scrollTop、offsetTop
- 在IE,Firefox,Safari,Chrome,Opera瀏覽器上調(diào)試javascript
- scrollTop 用法說明
- jQuery一步一步實(shí)現(xiàn)跨瀏覽器的可編輯表格，支持IE、Firefox、Safari、Chrome、Opera
- jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- js 兼容多瀏覽器的回車和鼠標(biāo)焦點(diǎn)事件代碼(IE6/7/8,firefox,chrome)
- 兼容IE、FireFox、Chrome等瀏覽器的xml處理函數(shù)js代碼
- 關(guān)于scrollLeft,scrollTop的瀏覽器兼容性測試
- jquery scrollTop方法根據(jù)滾動像素顯示隱藏頂部導(dǎo)航條
- C++獲取多瀏覽器上網(wǎng)歷史記錄示例代碼(支持獲取IE/Chrome/FireFox)
- jQuery動畫效果animate和scrollTop結(jié)合使用實(shí)例
- 淺談jQuery頁面的滾動位置scrollTop、scrollLeft
- 解決js頁面滾動效果scrollTop在FireFox與Chrome瀏覽器間的兼容問題的方法
相關(guān)文章
jquery bind(click)傳參讓列表中每行綁定一個(gè)事件
用jquey bind 點(diǎn)擊事件時(shí)，傳參不注意可能會導(dǎo)致點(diǎn)擊每一行都是顯示相同內(nèi)容的情況,下面有個(gè)示例，感興趣的朋友可以參考下2014-08-08
jquery js 重置表單 reset()具體實(shí)現(xiàn)代碼
我們希望表單提交以后，能reset，由于jquery沒有這個(gè)方法，所以只能采用其他的方法來實(shí)現(xiàn)了，具體如下，有此需求的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要為大家詳細(xì)介紹了jquery添加div實(shí)現(xiàn)消息聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
ztree實(shí)現(xiàn)權(quán)限橫向顯示功能
最近在做權(quán)限功能的時(shí)候，采用的ztree實(shí)現(xiàn)的，但是產(chǎn)品要求最后一層的權(quán)限節(jié)點(diǎn)要橫向顯示。下面小編把基于ztree實(shí)現(xiàn)權(quán)限橫向顯示功能的實(shí)現(xiàn)思路分享給大家，供大家參考2017-05-05
這篇文章介紹了jquery設(shè)置控件位置的方法，有需要的朋友可以參考一下2013-08-08
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)下拉菜單案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
jQuery獲取瀏覽器中的分辨率實(shí)現(xiàn)代碼
本篇文章小編為大家介紹，使用jQuery獲取瀏覽器中的分辨率的方法。需要的朋友參考下2013-04-04
簡單的代碼實(shí)現(xiàn)jquery定時(shí)器
當(dāng)收到消息的時(shí)候能夠及時(shí)的刷新,顯示收到消息的條數(shù)，下面與大分享下使用簡單的代碼實(shí)現(xiàn)jquery定時(shí)器2013-11-11
這篇文章主要介紹了jQuery無刷新分頁實(shí)現(xiàn)方法,以完整實(shí)例形式分析了jQuery實(shí)現(xiàn)分頁的數(shù)值計(jì)算與元素操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了Jquery中find與each方法用法,實(shí)例分析了find與each方法的功能、定義與使用技巧,需要的朋友可以參考下2015-02-02