這篇文章主要介紹了深入淺析JavaScript中的scrollTop的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
含義:滾動條高度
作用:滾動加載(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的全部敘述,希望對大家有所幫助