解決js頁(yè)面滾動(dòng)效果scrollTop在FireFox與Chrome瀏覽器間的兼容問(wèn)題的方法
最近在做博客的目錄功能，發(fā)現(xiàn)一個(gè)在現(xiàn)代瀏覽器間的一個(gè)bug，或是稱(chēng)之為差異，即頁(yè)面滾動(dòng)值(scrollTop)的獲取與設(shè)定。
在此之前先說(shuō)一下關(guān)于頁(yè)面元素的坐標(biāo)獲取，這張圖的經(jīng)典性不必再提。
實(shí)現(xiàn)滾動(dòng)到某位置功能
一個(gè)最主要的功能就是實(shí)現(xiàn)點(diǎn)擊標(biāo)題頁(yè)面滾動(dòng)，因?yàn)槲覀円獫L動(dòng)到頁(yè)面某個(gè)標(biāo)題，所以需要計(jì)算出滾動(dòng)這個(gè)元素的具體絕對(duì)位置，而常用的offsetTop是獲取到當(dāng)前元素與之最近的決定其定位的元素的偏移量，此處不適用。
此處應(yīng)使用瀏覽器原生提供的 getBoundingClientRect 接口，此函數(shù)返回的是元素距離瀏覽器各邊距的絕對(duì)位置，跟是什么定位類(lèi)型的無(wú)關(guān)，非常適合制作頁(yè)面滾動(dòng)效果。
獲取滾動(dòng)需要的數(shù)據(jù)， body 的 scrollTop 即頁(yè)面已經(jīng)被滾動(dòng)所隱藏的高度，再根據(jù)上面提到的接口獲取元素距離瀏覽器頂部的距離，可以算出需要的滾動(dòng)的高度，關(guān)系圖如下：
遂，頁(yè)面要滾動(dòng)到的位置就是：
這里順帶說(shuō)下getBoundingClientRect().top 獲取的元素在被滾動(dòng)隱藏與非滾動(dòng)時(shí)的區(qū)別：
如上圖可以看出，即使要滾動(dòng)到的元素部分在瀏覽器邊界外，獲取到的top即為負(fù)數(shù)，遂計(jì)算出來(lái)的頁(yè)面高度依然是正確的。
點(diǎn)擊目錄跳轉(zhuǎn)的功能就做完了，至今為止都很完美。
FireFox與Chrome的scrollTop的兼容問(wèn)題
直到我今天在FireFox測(cè)試時(shí)發(fā)現(xiàn)，火狐下頁(yè)面滾動(dòng)的跳轉(zhuǎn)功能無(wú)法使用。
1、原生接口測(cè)試
這里先提一下：
document.documentElement 即 <html> 元素，而 document.body 即 <body> 元素。
測(cè)試結(jié)果，在火狐上只能通過(guò)html元素來(lái)獲取和設(shè)定頁(yè)面滾動(dòng)高度，而在谷歌上反之只能用body元素來(lái)獲取和設(shè)定。
2、jquery接口測(cè)試
上面是使用原生的scrollTop屬性來(lái)獲取與設(shè)定，而jquery自己也實(shí)現(xiàn)了對(duì)scrollTop屬性的封裝，可以試試他的兼容性。
發(fā)現(xiàn)采用 $(document) 可以實(shí)現(xiàn)對(duì)獲取和設(shè)定scrollTop的兼容，大喜。
3、scrollTop動(dòng)畫(huà)實(shí)現(xiàn)測(cè)試
雖然實(shí)現(xiàn)了兼容，但為了有更好的效果，我希望采用動(dòng)畫(huà)的方式滾動(dòng)到頁(yè)面的某位置，而不是直接跳轉(zhuǎn)，這里采用jquery的 animate 函數(shù)來(lái)實(shí)現(xiàn)。
發(fā)現(xiàn)雖然可以采用$(document)來(lái)實(shí)現(xiàn)獲取和設(shè)定，但動(dòng)畫(huà)效果都無(wú)法使用，還是只能用body元素和html元素來(lái)實(shí)現(xiàn)。
最終解決方案
遂最完美的實(shí)現(xiàn)方案是：
獲取或直接設(shè)定當(dāng)前頁(yè)面滾動(dòng)高度：
有動(dòng)畫(huà)效果的設(shè)定當(dāng)前頁(yè)面高度：
以上就是解決js頁(yè)面滾動(dòng)效果scrollTop在FireFox與Chrome瀏覽器間的兼容問(wèn)題的方法，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
JS和jQuery使用submit方法無(wú)法提交表單的原因分析及解決辦法
這篇文章主要介紹了JS和jQuery使用submit方法無(wú)法提交表單的原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-05-05
javascript 數(shù)組去重復(fù)(在線(xiàn)去重工具)
很多情況下我們需要去掉重復(fù)的內(nèi)容，一般我們都是將很多內(nèi)容放到一個(gè)數(shù)組里面，然后再去重復(fù)，這里簡(jiǎn)單為大家整理一下2016-12-12
基于JS實(shí)現(xiàn)無(wú)縫滾動(dòng)思路及代碼分享
無(wú)縫滾動(dòng)效果在各大網(wǎng)站都有這樣的需求，應(yīng)用非常廣泛，下面小編給大家分享基于JS實(shí)現(xiàn)無(wú)縫滾動(dòng)思路及代碼，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)雪花飄落效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
window.onload 加載完畢的問(wèn)題及解決方案（下）
在IE中還可以在onreadystatechange事件里進(jìn)行判斷等方法。2009-07-07
利用js判斷數(shù)據(jù)是否是數(shù)組或字符串的常見(jiàn)方法
這篇文章主要給大家介紹了關(guān)于利用js判斷數(shù)據(jù)是否是數(shù)組或字符串的常見(jiàn)方法,其實(shí)有很多方法可以判斷數(shù)據(jù)是否是數(shù)組或字符串,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了ES6中class類(lèi)用法,結(jié)合實(shí)例形式分析了ES6中類(lèi)的實(shí)現(xiàn)方法與相關(guān)語(yǔ)法使用技巧,需要的朋友可以參考下2017-04-04
以前我們說(shuō)的內(nèi)存泄漏，通常發(fā)生在后端，但是不代表前端就不會(huì)有內(nèi)存泄漏。特別是當(dāng)前端項(xiàng)目變得越來(lái)越復(fù)雜后，前端也逐漸稱(chēng)為內(nèi)存泄漏的高發(fā)區(qū)。本文就帶大家了解一下Javascript的內(nèi)存泄漏2022-06-06
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)ATM機(jī)存取款功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要介紹了手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下2016-08-08