關於頁面滾動值scrollTop在FireFox與Chrome瀏覽器間的兼容問題

時間 2019-11-15

標籤關於頁面滾動 scrolltop firefox chrome 瀏覽器兼容問題欄目 Firefox 简体版

原文原文鏈接

需求

最近在作博客的目錄功能，發現一個在現代瀏覽器間的一個bug，或是稱之爲差別，即頁面滾動值(scrollTop)的獲取與設定。css

在此以前先說一下關於頁面元素的座標獲取，這張圖的經典性沒必要再提。html

實現滾動到某位置功能

博客目錄的一個最主要的功能就是實現點擊標題頁面滾動，由於咱們要滾動到頁面某個標題，因此須要計算出滾動這個元素的具體絕對位置，而經常使用的offsetTop是獲取到當前元素與之最近的決定其定位的元素的偏移量，此處不適用。jquery

此處應使用瀏覽器原生提供的 getBoundingClientRect 接口，此函數返回的是元素距離瀏覽器各邊距的絕對位置，跟是什麼定位類型的無關，很是適合製做頁面滾動效果。瀏覽器

關於getBoundingClientRect函數的具體用法能夠參見如下連接：連接1，連接2。wordpress

獲取滾動須要的數據， body 的 scrollTop 即頁面已經被滾動所隱藏的高度，再根據上面提到的接口獲取元素距離瀏覽器頂部的距離，能夠算出須要的滾動的高度，關係圖以下：函數

遂，頁面要滾動到的位置就是：測試

document.body.scrollTop+element.getBoundingClientRect().top;

這裏順帶說下 getBoundingClientRect().top 獲取的元素在被滾動隱藏與非滾動時的區別：動畫

如上圖能夠看出，即便要滾動到的元素部分在瀏覽器邊界外，獲取到的top即爲負數，遂計算出來的頁面高度依然是正確的。spa

點擊目錄跳轉的功能就作完了，至今爲止都很完美。code

FireFox與Chrome的scrollTop的兼容問題

直到我今天在FireFox測試時發現，火狐下頁面滾動的跳轉功能沒法使用。

一、原生接口測試

這裏先提一下：

document.documentElement 即 <html> 元素，而 document.body 即 <body> 元素。

測試結果，在火狐上只能經過html元素來獲取和設定頁面滾動高度，而在谷歌上反之只能用body元素來獲取和設定。

二、jquery接口測試

上面是使用原生的scrollTop屬性來獲取與設定，而jquery本身也實現了對scrollTop屬性的封裝，能夠試試他的兼容性。

發現採用 $(document) 能夠實現對獲取和設定scrollTop的兼容，大喜。

三、scrollTop動畫實現測試

雖然實現了兼容，但爲了有更好的效果，我但願採用動畫的方式滾動到頁面的某位置，而不是直接跳轉，這裏採用jquery的 animate 函數來實現。

發現雖然能夠採用$(document)來實現獲取和設定，但動畫效果都沒法使用，仍是隻能用body元素和html元素來實現。

最終解決方案

遂最完美的實現方案是：

獲取或直接設定當前頁面滾動高度：

$(document).scrollTop();//獲取，兼容火狐谷歌

有動畫效果的設定當前頁面滾動高度：

$("body,html").animate({ scrollTop: ... });//動畫滾動效果，兼容火狐谷歌

最終效果能夠點擊本篇文章頂部的目錄連接來查看效果：

擴展閱讀

一、cssom視圖模式cssom-view-module相關整理與介紹

二、getBoundingClientRect() 來獲取頁面元素的位置

(完)

原文地址-http://www.cnblogs.com/xxcanghai/p/5015712.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。