深入淺析JavaScript中的scrollTop
來(lái)源:易賢網(wǎng) 閱讀:715 次 日期:2016-07-28 15:55:06
溫馨提示:易賢網(wǎng)小編為您整理了“深入淺析JavaScript中的scrollTop”,方便廣大網(wǎng)友查閱!

這篇文章主要介紹了深入淺析JavaScript中的scrollTop的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下

含義:滾動(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ì)大家有所幫助

更多信息請(qǐng)查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址:深入淺析JavaScript中的scrollTop
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類(lèi)型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專(zhuān)用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專(zhuān)用圖標(biāo)