Элемент: свойство scrollWidth

Базовая линия Широко поддерживается

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2020 года.

Это Element.scrollWidth свойство — измерение ширины содержимого элемента, включая содержимое, не отображаемое на экране из-за переполнения.

Значение scrollWidth равно минимальной ширине, необходимой элементу для отображения всего содержимого в области просмотра без использования горизонтальной полосы прокрутки. Ширина измеряется так же, как и в clientWidth: она включает отступы элемента, но не его рамку, отступы или вертикальную полосу прокрутки (если присутствует). Она также может включать ширину псевдоэлементов, таких как ::before или ::after. Если содержимое элемента помещается без необходимости в горизонтальной полосе прокрутки, его scrollWidth равно clientWidth.

Примечание: Это свойство округляет значение до целого числа. Если вам нужно дробное значение, используйте Element.getBoundingClientRect().

Значение

Целое число.

Примеры

Обнаружение переполненного содержимого

В этом примере мы используем свойство scrollWidth для проверки переполнения содержимого элемента за его границы. У нас есть два div элемента, первый с шириной 100px, а второй без фиксированной ширины. Их содержимое идентично, и мы отображаем сообщение о том, переполняет ли каждое из них контейнер.

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

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");

// 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 View # dom-element-scrollwidth

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`scrollWidth`	1	12	1	≤12.1	1	18	4	≤12.1	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth