深入淺析JavaScript中的scrollTop
含義:滾動(dòng)條高度
作用:滾動(dòng)加載(ajax),滾動(dòng)導(dǎo)航固定定位,滾動(dòng)彈框定位等等.
展示滾動(dòng)導(dǎo)航和側(cè)邊欄滾動(dòng)固定定位的效果:
1、chrome瀏覽器
document.body.scrollTop和document.documentElement.scrollTop都可以
2、各瀏覽器下 scrollTop的差異
IE6/7/8/9/10:
對(duì)于沒有doctype聲明的頁面里可以使用 document.body.scrollTop 來獲取 scrollTop高度 ;
對(duì)于有doctype聲明的頁面則可以使用 document.documentElement.scrollTop ;
Safari:
safari 比較特別,有自己獲取scrollTop的函數(shù) : window.pageYOffset ;
Firefox:
火狐等等相對(duì)標(biāo)準(zhǔn)些的瀏覽器就省心多了,直接用
document.documentElement.scrollTop ;
3、獲取scrollTop值
完美的獲取scrollTop 賦值短語 :
var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;
ps:javascript中scrolltop用法的問題
document.documentElement.scrollTop指的是滾動(dòng)條的垂直坐標(biāo)
document.documentElement.clientHeight指的是瀏覽器可見區(qū)域高度
document.documentElement.clientHeight-oDiv是懸浮框的初始垂直坐標(biāo)(相對(duì)于body的top值)(這個(gè)值是固定不變的)
但是當(dāng)你拉動(dòng)滾動(dòng)條的時(shí)候,懸浮框的垂直坐標(biāo)(target)必須要在初始坐標(biāo)的基礎(chǔ)上增減相應(yīng)的值才能獲得視覺上隨滾動(dòng)條滾動(dòng)的效果,而這個(gè)增減的值就是滾動(dòng)條拉動(dòng)的距離,即你這個(gè)scrollTop
下面給大家說下javascript中scrollTop和offsetTop有啥區(qū)別
scrollTop是指某個(gè)可滾動(dòng)區(qū)塊向下滾動(dòng)的距離,比如向下滾動(dòng)了10個(gè)像素,那么這個(gè)元素的scrollTop屬性值就是10;
offsetTop則是元素的上邊框與父元素的上邊框的絕對(duì)距離。
兩者描述的不是同一個(gè)東西,所以沒有可比性。
以上所述是小編給大家介紹的JavaScript中的scrollTop的全部敘述,希望對(duì)大家有所幫助,如果大家想了解更多內(nèi)容,敬請(qǐng)關(guān)注腳本之家!
相關(guān)文章
D3.js 從P元素的創(chuàng)建開始(顯示可加載數(shù)據(jù))
D3是一個(gè)基于數(shù)據(jù)操作的可視化js庫,認(rèn)識(shí)d3,就從最基礎(chǔ)的顯示可加載數(shù)據(jù)談起,需要的朋友可以參考下2014-10-10微信小程序通過點(diǎn)擊事件跨頁面?zhèn)鲄⒓癲ata-方法傳參(data-)的示例詳解
在?vue?中,我們可以直接在點(diǎn)擊事件中放入傳遞的參數(shù)進(jìn)行傳參;然而微信小程序中并不適用這樣的寫法,但是微信小程序可以通過自定義屬性從而綁定參數(shù)使用,這篇文章主要介紹了微信小程序通過點(diǎn)擊事件跨頁面?zhèn)鲄⒁约癲ata-方法傳參(data-),需要的朋友可以參考下2023-12-12微信公眾平臺(tái) 客服接口發(fā)消息的實(shí)現(xiàn)代碼(Java接口開發(fā))
這篇文章主要介紹了微信公眾平臺(tái) 客服接口發(fā)消息的實(shí)現(xiàn)代碼(Java接口開發(fā)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04詳解js實(shí)現(xiàn)線段交點(diǎn)的三種算法
下面小編就最近學(xué)會(huì)的一些”求線段交點(diǎn)”的算法說一說, 希望對(duì)大家有所幫助?!扒缶€段交點(diǎn)”是一種非?;A(chǔ)的幾何計(jì)算, 在很多游戲中都會(huì)被使用到。有需要的可以參考學(xué)習(xí)2016-08-08JavaScript實(shí)現(xiàn)單點(diǎn)登錄的示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)單點(diǎn)登錄的示例,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2020-09-09由JavaScript中call()方法引發(fā)的對(duì)面向?qū)ο罄^承機(jī)制call的思考
看到這里的call()方法,以前也看過手冊(cè),說是對(duì)象冒充的,用于繼承的。在jQuery源碼里有點(diǎn)亂,所以就把這部分提取出來,放在一個(gè)單獨(dú)文件中,來看看具體執(zhí)行。2011-09-09Typescript中使用引用路徑別名報(bào)錯(cuò)的解決方法
本文主要介紹了Typescript中使用引用路徑別名報(bào)錯(cuò)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07