JavaScript 基於offsetHeight和clientHeight判斷是否出現滾動條

基於offsetHeight和clientHeight判斷是否出現滾動條

 

by:授客 QQ：1033553122

 

HTMLEelement.offsetHeight簡介

HTMLElement.offsetHeight 是一個只讀屬性，它返回該元素的像素高度，高度包含該元素的垂直內邊距和邊框，且是一個整數。

 

一般，元素的offsetHeight是一種元素CSS高度的衡量標準，包括元素的邊框、內邊距和元素的水平滾動條（若是存在且渲染的話），不包含:before或:after等僞類元素的高度。

 

對於文檔的body對象，它包括代替元素的CSS高度線性總含量高。浮動元素的向下延伸內容高度是被忽略的。

 

參考連接：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetHeight

 

HTMLEelement.clientHeight簡介

這個屬性是隻讀屬性，對於沒有定義CSS或者內聯佈局盒子的元素爲0，不然，它是元素內部的高度(單位像素)，包含內邊距，但不包括水平滾動條、邊框和外邊距。

 

clientHeight 能夠經過 CSS height + CSS padding - 水平滾動條高度 (若是存在)來計算

參考連接：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight

 

HTMLEelement.offsetWidth簡介

是一個只讀屬性，返回一個元素的佈局寬度。一個典型的（譯者注：各瀏覽器的offsetWidth可能有所不一樣）offsetWidth是測量包含元素的邊框(border)、水平線上的內邊距(padding)、豎直方向滾動條(scrollbar)（若是存在的話）、以及CSS設置的寬度(width)的值。

 

參考連接：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth

 

HTMLEelement.clientHeight簡介

內聯元素以及沒有 CSS 樣式的元素的 clientWidth 屬性值爲 0。Element.clientWidth 屬性表示元素的內部寬度，以像素計。該屬性包括內邊距，但不包括垂直滾動條（若是有）、邊框和外邊距。

 

參考連接：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientWidth

 

 

判斷目標元素是否出現滾動條

targetElement爲目標html元素，如下代碼用於判斷該元素內是否出現滾動條

if (targetElement.offsetHeight > targetElement.clientHeight &&

    targetElement.offsetWidth > targetElement.clientWidth

) {

    console.log("出現水平 & 垂直滾動條");

}

 

if (tableBody.offsetWidth > tableBody.clientWidth) {

    console.log("出現垂直滾動條");

}

 

if (obj.offsetHeight>obj.clientHeight) {

console.log("出現水平滾動條");

}