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