Element: scrollWidth 屬性
scrollWidth 是 Element 介面的一個只讀屬性，它測量元素內容（包括因溢位而未在螢幕上顯示的內容）的寬度。
scrollWidth 的值等於元素為了適應視口中的所有內容而不使用水平捲軸所需的最小寬度。寬度測量方式與 clientWidth 相同：它包括元素的內邊距，但不包括邊框、外邊距或垂直捲軸（如果存在）。它還可以包括偽元素（如 ::before 或 ::after）的寬度。如果元素的內容可以在沒有水平捲軸的情況下容納，則其 scrollWidth 等於 clientWidth。
值
一個整數。
示例
檢測溢位內容
在此示例中，我們使用 scrollWidth 屬性來檢查元素的內容是否溢位了其邊界。我們有兩個 div 元素，第一個元素的寬度為 100px，第二個元素沒有固定寬度。它們的內容完全相同，我們將顯示一條訊息，說明每個元素是否溢位了其容器。
HTML
html
<div id="div1">FooBar-FooBar-FooBar-FooBar</div>
<button id="button1">Check for overflow</button>
<pre id="log1"></pre>
<div id="div2">FooBar-FooBar-FooBar-FooBar</div>
<button id="button2">Check for overflow</button>
<pre id="log2"></pre>
CSS
css
div {
padding: 0.15em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
button {
margin: 0.15em 0 0.5em 0;
}
pre {
margin: 0.5em 0;
}
#div1 {
width: 100px;
}
#log1 {
margin-bottom: 2em;
}
JavaScript
js
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const log1 = document.getElementById("log1");
const log2 = document.getElementById("log2");
// Check if the scrollWidth is bigger than the clientWidth or not
function isOverflowing(element) {
return element.scrollWidth > element.clientWidth;
}
function checkOverflow(element, log) {
if (isOverflowing(element)) {
log.innerText = `Content is overflowing, scrollWidth is ${element.scrollWidth}px`;
} else {
log.innerText = `No overflows, scrollWidth is ${element.scrollWidth}px`;
}
}
button1.addEventListener("click", () => {
checkOverflow(div1, log1);
});
button2.addEventListener("click", () => {
checkOverflow(div2, log2);
});
結果
單擊按鈕以檢查內容是否溢位容器。
規範
| 規範 |
|---|
| CSSOM 檢視模組 # dom-element-scrollwidth |
瀏覽器相容性
載入中…