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