基于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
内聯元素以及沒有 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("出現水準滾動條");
作者：授客
QQ：1033553122
全國軟體測試QQ交流群：7156436
Git位址：https://gitee.com/ishouke
友情提示：限于時間倉促，文中可能存在錯誤，歡迎指正、評論！
作者五行缺錢，如果覺得文章對您有幫助，請掃描下邊的二維碼打賞作者，金額随意，您的支援将是我繼續創作的源動力，打賞後如有任何疑問，請聯系我!!!
微信打賞
支付寶打賞 全國軟體測試交流QQ群
