亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解頁(yè)面滾動(dòng)值scrollTop在FireFox與Chrome瀏覽器間的兼容問(wèn)題

 更新時(shí)間：2015年12月03日 13:49:18   作者：chrome scrolltop  
這篇文章主要介紹了詳解頁(yè)面滾動(dòng)值scrollTop在FireFox與Chrome瀏覽器間的兼容問(wèn)題 的相關(guān)資料,需要的朋友可以參考下

最近做了個(gè)項(xiàng)目，其中有一目錄功能，發(fā)現(xiàn)一個(gè)在現(xiàn)代瀏覽器間的一個(gè)bug，或是稱之為差異，即頁(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ì)位置，跟是什么定位類型的無(wú)關(guān)，非常適合制作頁(yè)面滾動(dòng)效果。

關(guān)于getBoundingClientRect函數(shù)的具體用法可以參見(jiàn)以下鏈接：鏈接1，鏈接2。

獲取滾動(dòng)需要的數(shù)據(jù)， body 的 scrollTop 即頁(yè)面已經(jīng)被滾動(dòng)所隱藏的高度，再根據(jù)上面提到的接口獲取元素距離瀏覽器頂部的距離，可以算出需要的滾動(dòng)的高度，關(guān)系圖如下：


遂，頁(yè)面要滾動(dòng)到的位置就是：

復(fù)制代碼 代碼如下:

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

這里順帶說(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)高度：

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

有動(dòng)畫(huà)效果的設(shè)定當(dāng)前頁(yè)面滾動(dòng)高度：

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

最終效果可以點(diǎn)擊本篇文章頂部的目錄鏈接來(lái)查看效果：


jQuery CSS 操作 - scrollTop() 方法

實(shí)例

設(shè)置 <div> 元素中滾動(dòng)條的垂直偏移：

$(".btn1").click(function(){
 $("div").scrollLeft(100);
});

定義和用法

scrollTop() 方法返回或設(shè)置匹配元素的滾動(dòng)條的垂直位置。
scroll top offset 指的是滾動(dòng)條相對(duì)于其頂部的偏移。
如果該方法未設(shè)置參數(shù)，則返回以像素計(jì)的相對(duì)滾動(dòng)條頂部的偏移。

語(yǔ)法

$(selector).scrollTop(offset)

參數(shù) 描述
offset 可選。規(guī)定相對(duì)滾動(dòng)條頂部的偏移，以像素計(jì)。

提示和注釋

注釋：該方法對(duì)于可見(jiàn)元素和不可見(jiàn)元素均有效。
注釋：當(dāng)用于獲取值時(shí)，該方法只返回第一個(gè)匹配元素的 scroll top offset。
注釋：當(dāng)用于設(shè)置值時(shí)，該方法設(shè)置所有匹配元素的 scroll top offset。

相關(guān)文章

最新評(píng)論