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

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

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

Свойство Element.scrollLeft получает или устанавливает количество пикселей, на которое содержимое элемента прокручено влево от его левого края. Это значение имеет точность до подпикселя в современных браузерах, что означает, что это необязательно целое число.

Значение

Двойное значение с плавающей точкой, указывающее количество пикселей, на которое элемент в данный момент прокручен по горизонтали от начала координат. Положительное значение означает, что элемент прокручен вправо (чтобы отобразить больше содержимого справа). Если элемент вообще не прокручен влево или вправо, то scrollLeft равно 0. Если документ не является активным документом, возвращаемое значение равно 0. Если документ отображается на устройстве с точностью до подпикселя, возвращаемое значение также имеет точность до подпикселя и может содержать десятичную часть.

Возможно, что scrollLeft может быть отрицательным, если элемент можно прокрутить влево от исходного содержащего блока. Например, если свойство direction равно rtl (справа налево), и содержимое растет влево, то scrollLeft равно 0 когда полоса прокрутки находится в крайнем правом положении (в начале прокрученного содержимого), а затем все более отрицательным по мере прокрутки к концу содержимого.

Safari реагирует на перепрокрутку, обновляя scrollLeft за пределы максимальной позиции прокрутки (если эффект «отскока» по умолчанию отключен, например, путем установки overscroll-behavior на none), в то время как Chrome и Firefox этого не делают.

Свойство scrollLeft может быть установлено, что заставляет элемент прокрутиться до указанной горизонтальной позиции, так же, как и при использовании Element.scroll() со значением behavior: "auto".

Примеры

HTML

<div id="container">
  <div id="content">Click the button to slide right!</div>
</div>

<button id="slide" type="button">Slide right</button>

CSS

#container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #ccc;
}

JavaScript

const button = document.getElementById("slide");

button.onclick = () => {
  document.getElementById("container").scrollLeft += 20;
};

Результат

Спецификации

Спецификация
CSSOM View Module # dom-element-scrollleft

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`scrollLeft`	86 1–86 Для элементов справа налево, это свойство использует значения от 0 до 100 (крайний слева до крайнего справа), а не отрицательные значения. См. ошибку 41319147.	86 12–86 Для элементов справа налево, это свойство использует значения от 0 до 100 (крайний слева до крайнего справа), а не отрицательные значения. См. ошибку 41319147.	1	8	1	86 18–86 Для элементов справа налево, это свойство использует значения от 0 до 100 (крайний слева до крайнего справа), а не отрицательные значения. См. ошибку 41319147.	4	10.1	1	14.0 1.0–14.0 Для элементов справа налево, это свойство использует значения от 0 до 100 (крайний слева до крайнего справа), а не отрицательные значения. См. ошибку 41319147.	86 4.4–86 Для элементов справа налево, это свойство использует значения от 0 до 100 (крайний слева до крайнего справа), а не отрицательные значения. См. ошибку 41319147.

См. также

© 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/scrollLeft