深入淺析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ì)于沒(méi)有doctype聲明的頁(yè)面里可以使用 document.body.scrollTop 來(lái)獲取 scrollTop高度 ;
對(duì)于有doctype聲明的頁(yè)面則可以使用 document.documentElement.scrollTop ;
Safari:
safari 比較特別,有自己獲取scrollTop的函數(shù) : window.pageYOffset ;
Firefox:
火狐等等相對(duì)標(biāo)準(zhǔn)些的瀏覽器就省心多了,直接用
document.documentElement.scrollTop ;
3、獲取scrollTop值
完美的獲取scrollTop 賦值短語(yǔ) :
var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;
ps:javascript中scrolltop用法的問(wèn)題
document.documentElement.scrollTop指的是滾動(dòng)條的垂直坐標(biāo)
document.documentElement.clientHeight指的是瀏覽器可見(jiàn)區(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)的值才能獲得視覺(jué)上隨滾動(dòng)條滾動(dòng)的效果,而這個(gè)增減的值就是滾動(dòng)條拉動(dòng)的距離,即你這個(gè)scrollTop
下面給大家說(shuō)下javascript中scrollTop和offsetTop有啥區(qū)別
scrollTop是指某個(gè)可滾動(dòng)區(qū)塊向下滾動(dòng)的距離,比如向下滾動(dòng)了10個(gè)像素,那么這個(gè)元素的scrollTop屬性值就是10;
offsetTop則是元素的上邊框與父元素的上邊框的絕對(duì)距離。
兩者描述的不是同一個(gè)東西,所以沒(méi)有可比性。
以上所述是小編給大家介紹的JavaScript中的scrollTop的全部敘述,希望對(duì)大家有所幫助,如果大家想了解更多內(nèi)容,敬請(qǐng)關(guān)注腳本之家!
相關(guān)文章
JavaScript 實(shí)現(xiàn) Tab 點(diǎn)擊切換實(shí)例代碼
Tab 選項(xiàng)卡切換效果在現(xiàn)如今的網(wǎng)頁(yè)中,運(yùn)用的也是比較多的,包括點(diǎn)擊切換、滑動(dòng)切換、延遲切換、自動(dòng)切換等多種效果,在這篇博文里,我們是通過(guò)原生 JavaScript 來(lái)實(shí)現(xiàn) Tab 點(diǎn)擊切換的效果。2017-03-03
自己寫(xiě)一個(gè)uniapp全局彈窗(APP端)
應(yīng)用uni-app跨平臺(tái)框架進(jìn)行項(xiàng)目開(kāi)發(fā)過(guò)程中,需要實(shí)現(xiàn)版本更新時(shí)全頁(yè)面彈窗,底部導(dǎo)航欄無(wú)法點(diǎn)擊的效果,下面這篇文章主要給大家介紹了關(guān)于uniapp全局彈窗(APP端)的相關(guān)資料,需要的朋友可以參考下2022-10-10
uniapp返回上一頁(yè)并實(shí)現(xiàn)刷新界面數(shù)據(jù)的完整代碼
從一個(gè)列表界面點(diǎn)擊新增按鈕,進(jìn)入新增元素的界面,然后新增之后返回列表界面,并刷新列表界面,下面小編給大家分享uniapp返回上一頁(yè),并實(shí)現(xiàn)刷新界面數(shù)據(jù)的代碼,感興趣的朋友跟隨小編一起看看吧2024-04-04
JSON+HTML實(shí)現(xiàn)國(guó)家省市聯(lián)動(dòng)選擇效果
實(shí)現(xiàn)國(guó)家省市聯(lián)動(dòng)的方法有很多,本文要為大家介紹的JSON+HTML如何實(shí)現(xiàn),需要的朋友可以參考下2014-05-05
JavaScript定義函數(shù)的三種實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript定義函數(shù)的三種實(shí)現(xiàn)方法的相關(guān)資料,希望通過(guò)本文大家能夠掌握三種定義函數(shù)的方法,需要的朋友可以參考下2017-09-09
layui.js實(shí)現(xiàn)的表單驗(yàn)證功能示例
這篇文章主要介紹了layui.js實(shí)現(xiàn)的表單驗(yàn)證功能,結(jié)合實(shí)例形式分析了基于layui.js的事件監(jiān)聽(tīng)、驗(yàn)證、判定等相關(guān)操作技巧,需要的朋友可以參考下2017-11-11

