View in EnglishAlways switch to English

Element：scrollWidth 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

Element.scrollWidth 只读属性是元素内容宽度的一种度量，包括由于溢出而在屏幕上不可见的内容。

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

备注：该属性会将值取整成整数。如果你需要小数值，请使用Element.getBoundingClientRect()。

HTML

html

<div>这是一条很长很长的内容</div><button>溢出检查</button><pre></pre><div>这是一条很长很长的内容</div><button>溢出检查</button><pre></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

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");// 检查 scrollWidth 是否大于 clientWidthfunction isOverflowing(element) {  return element.scrollWidth > element.clientWidth;}function checkOverflow(element, log) {  if (isOverflowing(element)) {    log.innerText = `内容溢出，scrollWidth 为 ${element.scrollWidth}px`;  } else {    log.innerText = `没有溢出，scrollWidth 为 ${element.scrollWidth}px`;  }}button1.addEventListener("click", () => {  checkOverflow(div1, log1);});button2.addEventListener("click", () => {  checkOverflow(div2, log2);});