JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)習(xí)筆記
全文參考:https://github.com/iuap-design/blog/issues/38 、MDN
clientHeight,只讀
clientHeight可以用公式 CSS height + CSS padding - 水平滾動(dòng)條的高度 (如果存在) 來(lái)計(jì)算。
如圖,這樣一個(gè)div,它的clientHeight為95,計(jì)算:50(height)+30(padding-top)+30(padding-bottom)-15(經(jīng)測(cè)量滾動(dòng)條高度就是15)=95
clientTop,只讀
一個(gè)元素頂部邊框的寬度(以像素表示)。嗯。。就只是border-top-width
類(lèi)似的屬性還有一個(gè)clientLeft,顧名思義……
offsetHeight,只讀
元素的offsetHeight是一種元素CSS高度的衡量標(biāo)準(zhǔn),包括元素的邊框、內(nèi)邊距和元素的水平滾動(dòng)條(如果存在且渲染的話(huà)),是一個(gè)整數(shù)。
還是上面的圖,div的offsetHeight為112。計(jì)算:50+60(上下內(nèi)邊距)+2(上下邊框)=112
offsetTop,只讀
HTMLElement.offsetParent是一個(gè)只讀屬性,返回一個(gè)指向最近的包含該元素的定位元素。如果沒(méi)有定位的元素,則offsetParent為最近的table,table cell或根元素(標(biāo)準(zhǔn)模式下為html;quirks 模式下為body)。當(dāng)元素的style.display設(shè)置為 "none" 時(shí),offsetParent返回null。
它返回當(dāng)前元素相對(duì)于其offsetParent
元素的頂部的距離。
還是上面那張圖,div的offsetTop為20,因?yàn)閙argin-top是20,距離html頂部的距離是20...
scrollHeight,只讀
實(shí)話(huà),這么久了,竟然一直搞錯(cuò)這個(gè)scroll相關(guān)屬性,其實(shí)它描述的是outer的屬性,而窩一直取inner的屬性值,難怪scrollTop一直是0。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #outer { margin: 100px 50px; background: url(http://images.cnblogs.com/cnblogs_com/wenruo/873448/o_esdese.jpg); height: 100px; width: 50px; padding: 10px 50px; overflow: scroll; } #inner { height: 200px; width: 50px; background-color: #d0ffe3; } </style> </head> <body> <div id="outer"> <div id="inner"></div> </div> </body> </html>
因?yàn)橄拗屏烁冈氐母叨?,所以不能全部顯示子元素,設(shè)置了overflow之后,可以通過(guò)滾動(dòng)條的形式滑動(dòng)查看子元素。效果如圖1,如果沒(méi)有限制父元素的高度,那么效果將如圖2顯示。
(圖1)
(圖2)
scrollHeight
就是圖2的高度,沒(méi)有高度限制時(shí),能夠完全顯示子元素時(shí)的高度(clientHeight)。
所以這里scrollHeight為220,計(jì)算:200+10+10=220
scrollTop,可寫(xiě)
是這些元素中唯一一個(gè)可寫(xiě)可讀的。
下面的圖是用微信截圖隨便畫(huà)的:D(不小心混入了一個(gè)光標(biāo)。。
所以當(dāng)滾動(dòng)條在最頂端的時(shí)候,scrollTop=0,當(dāng)滾動(dòng)條在最低端的時(shí)候,scrollTop=115
這個(gè)115怎么來(lái)的(滾動(dòng)條高度是15,我量的),見(jiàn)下圖。(實(shí)為我主觀臆測(cè),不保證準(zhǔn)確性。。。_(:з」∠)_
scrollTop是一個(gè)整數(shù)。
如果一個(gè)元素不能被滾動(dòng),它的scrollTop
將被設(shè)置為0
。
設(shè)置scrollTop的值小于0,scrollTop
被設(shè)為0。
如果設(shè)置了超出這個(gè)容器可滾動(dòng)的值,scrollTop
會(huì)被設(shè)為最大值。
判定元素是否滾動(dòng)到底:
element.scrollHeight - element.scrollTop === element.clientHeight
返回頂部
element.scrollTop = 0
一個(gè)簡(jiǎn)單的返回頂部的時(shí)間,一個(gè)需要注意的地方是,動(dòng)畫(huà)是由快到慢的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回頂部</title> <style> #outer { height: 100px; width: 100px; padding: 10px 50px; border: 1px solid; overflow: auto; } </style> </head> <body> <div id="outer"> <div id="inner"></div> </div> <button onclick="toTop(outer)">返回頂部</button> <script> function toTop(ele) { // ele.scrollTop = 0; let dy = ele.scrollTop / 4; // 每次更新scrollTop改變的大小 if (ele.scrollTop > 0) { ele.scrollTop -= Math.max(dy, 10); setTimeout(() => { toTop(ele, dy); }, 30); } } // 初始化 window.onload = () => { for (let i = 0; i < 233; i++) inner.innerText += `第${i}行\(zhòng)n`; } </script> </body> </html>
到此這篇關(guān)于JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)習(xí)筆記的文章就介紹到這了,更多相關(guān)JavaScript scrollTop scrollHeight offsetTop offsetHeight內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序Page中data數(shù)據(jù)操作和函數(shù)調(diào)用方法
這篇文章主要介紹了微信小程序Page中data數(shù)據(jù)操作和函數(shù)調(diào)用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05js重寫(xiě)alert控件(適合學(xué)習(xí)js的新手朋友)
這篇文章主要介紹js重寫(xiě)alert控件的過(guò)程比較適合學(xué)習(xí)js的新手朋友,需要的朋友可以參考下2014-08-08Web開(kāi)發(fā)中客戶(hù)端的跳轉(zhuǎn)與服務(wù)器端的跳轉(zhuǎn)的區(qū)別
這篇文章主要介紹了Web開(kāi)發(fā)中客戶(hù)端的跳轉(zhuǎn)與服務(wù)器端的跳轉(zhuǎn)的區(qū)別 ,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03Html5 js實(shí)現(xiàn)手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了Html5 js實(shí)現(xiàn)手風(fēng)琴效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01js彈出的對(duì)話(huà)窗口永遠(yuǎn)保持居中顯示
本文將介紹js彈出的對(duì)話(huà)窗口永遠(yuǎn)保持居中顯示實(shí)現(xiàn)方法,需要了解的朋友可以參考下2012-12-12JavaScript實(shí)現(xiàn)使用Canvas繪制圖形的基本教程
本篇文章主要介紹了JavaScript實(shí)現(xiàn)使用Canvas繪制圖形的基本教程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-10-10多種js圖片預(yù)加載實(shí)現(xiàn)方式分享
這篇文章主要為大家詳細(xì)介紹了多種js圖片預(yù)加載實(shí)現(xiàn)方式,包括html標(biāo)簽或css加載圖片、純js實(shí)現(xiàn)預(yù)加載,感興趣的小伙伴們可以參考一下2016-02-02JavaScript 實(shí)現(xiàn)完美兼容多瀏覽器的復(fù)制功能代碼
這兩天在做Web前端時(shí),遇到需求通過(guò)js實(shí)現(xiàn)文本復(fù)制的功能。經(jīng)過(guò)一番測(cè)試,終于實(shí)現(xiàn)了出來(lái),有需要的小伙伴可以參考下。2015-04-04