<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
在開發中我們常常會用到判斷卷軸是否觸底的邏輯。我一般都會在網上搜一段程式碼,這段程式碼有用到scrollTop、clientHeight、 scrollHeight 。接著我簡單看一下好像理解了,再在專案裡用一下好使了就沒去深入研究相關概念。等下次用到了還是搜一下,自己寫不出來...於是筆者想想深入研究一下這些概念好擺脫尷尬的局面。
看了很多的文章,感覺有一些寫的不夠詳細具體,要麼就是概念的堆砌沒有例子和圖,要麼就是一張圖寫滿了各種概念不易於理解。於是筆者自己對照MDN檔案總結了一下這些概念,並結合範例加深對這些概念的理解,並總結了這些概念彼此之間的數量關係和應用場景。歡迎大家閱讀,有寫錯或者理解錯的地方請不吝指正。
(1)含義:唯讀屬性,表示元素的內部寬度,單位為畫素。
(2)從盒子模型角度看:包含padding,但不包含border, margin 以及垂直卷軸。
(3)注意:內聯元素clientWidth為0。
(4)語法:element.clientWidth;
(1)含義:唯讀屬性,表示元素的內部高度,單位為畫素。
(2)從盒子模型角度看:包含padding,但不包含border, margin 以及水平卷軸。
(3)注意:內聯元素clientHeight為0。
(4)語法:element.clientHeight;
(1)含義:唯讀屬性,表示一個元素左邊框的寬度,單位為畫素。
(2)從盒子模型角度看:clientLeft 不包括左外邊距和左內邊距.
(3)語法:element.clientLeft
(4)備註:如果元素的文字方向是從右向左(RTL, right-to-left),並且由於內容溢位導致左邊出現了一個垂直卷軸,則該屬性包括卷軸的寬度。
(1)含義:唯讀屬性,表示一個元素頂部邊框的寬度,單位為畫素。
(2)從盒子模型角度看:不包括頂部外邊距或內邊距
(3)語法:element.clientTop
以如下的盒子模型來驗證來看一下這些值以及計算過程(採用的例子是MDN上的,您可以開啟控制檯自己試一下):
const div = document.getElementById('iddiv')
clientWidth計算:內容寬度+左右padding即 182+28*2 = 182 + 56 = 238
clietentHeight計算:內容高度+上下padding即 102 + 0 = 102
clientLeft和clientTop計算:左邊框 24 ; 上邊框24
注意以上的計算過程是筆者在盒模型的設定為:box-sizing: content-box
時的計算方法,如果盒模型設定為 box-sizing: border-box;
則計算clientWidth 和 clientHeight的方法為:
(1)clientWidth :clientWidth 可以通過 CSS width+ CSS padding - 垂直卷軸寬度 (如果存在) 來計算
(2)clientHeight:clientHeight 可以通過 CSS height + CSS padding - 水平卷軸高度 (如果存在) 來計算
以clientWidth的計算為例說明一下
首先按照正常演演算法計算: 95 + 28*2 = 95 + 56 = 151 。151大於134 , 時因為還沒有扣除卷軸的寬度,卷軸的寬度 為 151- 134 = 17 , 量了一下卷軸的寬度確實為17,如下圖所示:
(1)含義:唯讀屬性,返回元素的佈局寬度,單位畫素。
(2)從盒子模型角度看:包含通過css設定的width,border, padding以及豎直方向卷軸的寬度。
(3)語法:element.offsetWidth
(4)備註:各瀏覽器的 offsetWidth 可能有所不同。
(1)含義:唯讀屬性,元素的佈局高度,單位畫素。
(2)從盒子模型角度看:包含通過css設定的height, border, padding以及水平方向卷軸的高度。
(3)語法:element.offsetHeight
(4)備註:如果元素被隱藏則返回0。
接下來要介紹offsetLeft和offsetTop的含義,在這之前要明白offsetParent的含義:
HTMLElement.offsetParent 是一個唯讀屬性。
返回一個指向最近的(指包含層級上的最近)包含該元素的定位元素或者最近的 table,td,th,body元素。
當元素的 style.display 設定為 "none" 時,offsetParent 返回 null
(1)含義:唯讀屬性,當前元素左上角相對於offsetParent左邊界的偏移。
(3)語法:element.offsetLeft
(4)備註:如果元素被隱藏則返回0。
(1)含義:唯讀屬性,當親元素相對於offsetParent元素的頂部內邊距的距離。
(3)語法:element.offsetTop
(4)備註:如果元素被隱藏則返回0。
筆者寫了一個demo用來說明如上概念,程式碼如下:
<html lang="en"> <head> <style> .parent { width: 400px; height: 400px; border: 1px solid #ccc; padding-top: 50px; padding-left: 20px; } .child { width: 200px; height: 200px; padding: 10px; border: 10px solid black; overflow: auto; } </style> </head> <body> <div class="parent"> <div class="child" id="child-id"> <!-- 省略內部內容 --> </div> </div> </body> </html>
程式碼執行效果以及盒子模型如下圖所示:
const div = document.getElementById('child-id')
其計算過程:border 20 + pading 20 + content 183 + 卷軸 17 = 240。
也就是: 20 + 20 + 200= 240
如果設定 box-sizing:border-box
則對應的盒子模型變為:
此時檢視offsetWidth的值:
其計算過程: content 160 + padding 20 + border 20 = 200 。我們觀察實際效果:
發現雖然computed的盒子模型顯示padding是10 ,但實際上並不是10了,而且由於卷軸的存在左右顯示的padding所佔空間已經不相等。
計算過程與offsetWidth類似: 183 content + 17 卷軸 +20 padding + 20 border = 240。如果設定 box-sizing:border-box
則offsetHeight值如下:
如上我們發現offsetParent為body元素, 那麼offsetTop值為59 , offsetLeft的值為29,都是怎麼算出來的啊?看一下body以及class為parent的外層div的盒模型結構:
參考盒子模型結構我們可以得到計算過程:
offsetTop : 8 (body padding) + 1 (parent border) +50 (parent padding) = 59
offsetLeft: 8 (body padding) + 1 (parent border) + 20 (parent padding) = 29
(1)含義:可讀取可設定,一個元素的內容水平捲動的畫素數(卷軸到元素左邊的距離)。
(2)語法:Element.scrollLeft
(3)備註:注意如果這個元素的內容排列方向是rtl (right-to-left) ,那麼卷軸會位於最右側(內容開始處),並且scrollLeft值為 0。此時,當你從右到左拖動卷軸時,scrollLeft 會從 0 變為負數。
(1)含義:可讀取可設定,一個元素的內容垂直捲動的畫素數。
(2)語法:Element.scrollTop
(3)備註:一個元素的 scrollTop 值是這個元素的內容頂部(捲起來的)到它的視口可見內容(的頂部)的距離的度量。注意,這裡並沒有描述為卷軸距離頂部的距離,當然這樣理解也沒問題。當一個元素的內容沒有產生垂直方向的卷軸,那麼它的 scrollTop 值為0。
(1)含義:唯讀屬性,是一個元素內容寬度的度量,包括由於溢位導致的檢視不可見內容。
(2)語法:Element.scrollWidth
(3)備註:沒有水平卷軸的情況下,scrollWidth 值與元素檢視填充所有內容所需要的最小值clientWidth相同。
(1)含義:唯讀屬性,是一個元素內容高度的度量,包括由於溢位導致的檢視不可見內容。
(2)語法:element.scrollHeight
(3)備註:沒有垂直卷軸的情況下,scrollHeight 值與元素檢視填充所有內容所需要的最小值clientHeight相同。
為了說明scrollHeight 的含義,MDN檔案給出瞭如下的示意圖:
範例程式碼任然沿用2.5 節的demo示程式碼, 執行效果如下:
如上圖所示:水平方向上卷軸沒有向右捲動時,則scrollLeft的值為0。
如上圖所示:水平方向卷軸向右捲動了一定距離,則此時scrollLeft的值為58。
如上圖所示:豎直方向上卷軸沒有向下捲動時,則scrollTop的值為0。
如上圖所示:豎直方向上卷軸沒有向下捲動了一定距離,則此時scrollTop的值為59。
如上圖所示:scrollWidth的值為704,代表內容的寬度。
如上圖所示:scrollHeight的值為262,代表內容的高度。
(1)關係1
沒有豎直方向上的卷軸: scrollHeight = clientHeight
應用:判斷豎直方向是是否有卷軸
(2)關係2
沒有水平方向上的卷軸:scrollWidth = clientWidth
應用:判斷水平方向是否有卷軸
(3)關係3
scrollTop + clientHeight >= scrollHeight
因為scrollTop是一個非整數,而scrollHeight和clientHeight是四捨五入的,因此確定捲動區域是否捲動到底的唯一方法是檢視捲動量是否足夠接近某個閾值:
Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1
一圖勝千言,本文的全部內容如下:
以上就是JS屬性scrollTop clientHeight scrollHeight理解學習的詳細內容,更多關於JS屬性scrollTop clientHeight scrollHeight的資料請關注it145.com其它相關文章!
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45