元素：scrollWidth 属性

Element.scrollWidth 只读属性是元素内容宽度的度量，包括由于溢出而未显示在屏幕上的内容。

scrollWidth 值等于元素在不使用水平滚动条的情况下，为了适应所有内容在视窗中显示所需的最小宽度。宽度测量方式与 clientWidth 相同：它包含元素的内边距，但不包含其边框、外边距或垂直滚动条（如果有）。它还可能包含伪元素（如 ::before 或 ::after）的宽度。如果元素的内容可以适应，而无需使用水平滚动条，则其 scrollWidth 等于 clientWidth

注意：此属性将值四舍五入为整数。如果您需要分数值，请使用 element.getBoundingClientRect().

值

整数。

示例

检测溢出的内容

在本示例中，我们使用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 offsetWidth or not
function isOverflowing(element) {
  return element.scrollWidth > element.offsetWidth;
}

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅