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 |
浏览器兼容性
加载中…