基於offsetHeight和clientHeight判斷是否出現滾動條 by:授客 QQ：1033553122 HTMLEelement.offsetHeight簡介 HTMLElement.offsetHeight 是一個只讀屬性，它返回該元素的像素高度，高度包含該元素的垂直內邊距和邊框，且是一 ...
基於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("出現水平滾動條");
}
