解決js頁面滾動效果scrollTop在FireFox與Chrome瀏覽器間的兼容問題的方法
最近在做博客的目錄功能，發(fā)現(xiàn)一個在現(xiàn)代瀏覽器間的一個bug，或是稱之為差異，即頁面滾動值(scrollTop)的獲取與設(shè)定。
在此之前先說一下關(guān)于頁面元素的坐標(biāo)獲取，這張圖的經(jīng)典性不必再提。
實(shí)現(xiàn)滾動到某位置功能
一個最主要的功能就是實(shí)現(xiàn)點(diǎn)擊標(biāo)題頁面滾動，因?yàn)槲覀円獫L動到頁面某個標(biāo)題，所以需要計算出滾動這個元素的具體絕對位置，而常用的offsetTop是獲取到當(dāng)前元素與之最近的決定其定位的元素的偏移量，此處不適用。
此處應(yīng)使用瀏覽器原生提供的 getBoundingClientRect 接口，此函數(shù)返回的是元素距離瀏覽器各邊距的絕對位置，跟是什么定位類型的無關(guān)，非常適合制作頁面滾動效果。
獲取滾動需要的數(shù)據(jù)， body 的 scrollTop 即頁面已經(jīng)被滾動所隱藏的高度，再根據(jù)上面提到的接口獲取元素距離瀏覽器頂部的距離，可以算出需要的滾動的高度，關(guān)系圖如下：
遂，頁面要滾動到的位置就是：
這里順帶說下getBoundingClientRect().top 獲取的元素在被滾動隱藏與非滾動時的區(qū)別：
如上圖可以看出，即使要滾動到的元素部分在瀏覽器邊界外，獲取到的top即為負(fù)數(shù)，遂計算出來的頁面高度依然是正確的。
點(diǎn)擊目錄跳轉(zhuǎn)的功能就做完了，至今為止都很完美。
FireFox與Chrome的scrollTop的兼容問題
直到我今天在FireFox測試時發(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)前頁面滾動高度：
有動畫效果的設(shè)定當(dāng)前頁面高度：
以上就是解決js頁面滾動效果scrollTop在FireFox與Chrome瀏覽器間的兼容問題的方法，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
下面小編就為大家?guī)硪黄獪\談javascript中遇到的字符串對象處理。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了小程序之簡單登錄注冊表單驗(yàn)證，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本文通過實(shí)例代碼給大家介紹了JS模擬超市簡易收銀臺小程序代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-08-08
JavaScript?setTimeout和setInterval的用法與區(qū)別詳解
Javascript的setTimeOut和setInterval函數(shù)應(yīng)用非常廣泛,它們都用來處理延時和定時任務(wù),下面這篇文章主要給大家介紹了關(guān)于JavaScript?setTimeout和setInterval的用法與區(qū)別,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了JavaScript模擬數(shù)組合并concat的相關(guān)資料,需要的朋友可以參考下2016-03-03
javascript的alert box在java中如何顯示多行
這篇文章主要介紹了javascript的alert box在java中如何顯示多行,需要的朋友可以參考下2014-05-05
JavaScript使用Promise封裝Axios進(jìn)行高效開發(fā)
這篇文章主要介紹了JavaScript使用Promise封裝Axios進(jìn)行高效開發(fā)，Axios是一個基于Promise的HTTP庫，它可以幫助我們更方便地發(fā)起HTTP請求，并且提供了許多高級功能，感興趣的同學(xué)可以參考下文2023-05-05
web-view內(nèi)嵌H5與uniapp數(shù)據(jù)的實(shí)時傳遞解決方案
這篇文章主要介紹了web-view內(nèi)嵌H5與uniapp數(shù)據(jù)的實(shí)時傳遞,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了Js和VUE實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
javascript橋接橋接設(shè)計模式（Bridge Pattern）是一種結(jié)構(gòu)型設(shè)計模式,它用于將抽象部分與其具體實(shí)現(xiàn)部分分離,使它們可以獨(dú)立地變化,本文將通過代碼示例詳解的給大家介紹一下JS橋接模式,需要的朋友可以參考下2023-08-08