Свойство scrollLeft

Свойство scrollLeft содержит ширину прокрученной части элемента слева. Это свойство можно менять - и элемент автоматически будет прокручиваться к новому значению свойства.

Синтаксис

элемент.scrollLeft;

Примеры

Пример

При клике по элементу с id, равным elem, прокрутим его до конца:

#elem {
	width: 150px;
	overflow: auto;
	white-space: nowrap;
	border: 1px solid #000;
}

<div id="elem">У этого элемента есть горизонтальная прокрутка</div>

let elem = document.querySelector('#elem');

elem.addEventListener('click', scroll);

function scroll() 
{
	elem.scrollLeft = elem.scrollWidth;
}

Результат выполнения кода:

У этого элемента есть горизонтальная прокрутка

Пример

При прокрутке элемента в начало текст будет делать красным (html код как в предыдущем примере):

let elem = document.querySelector('#elem');

elem.addEventListener('scroll', scroll);

function scroll() 
{
	if (elem.scrollLeft === 0) 
	{
		elem.style.color = 'red';
	} else {
		elem.style.color = 'black';
	}
}

Результат выполнения кода:

У этого элемента есть горизонтальная прокрутка

Пример

Посмотрим как узнать прокручен ли элемент до конца.

При прокрутке элемента до конца текст будет делать красным (html код как в первом примере):

let elem = document.querySelector('#elem');

//Узнаем максимальную прокрутку элемента
let start = elem.scrollLeft; //начальная прокрутка
elem.scrollLeft = elem.scrollWidth; //прокручиваем до конца
let max = elem.scrollLeft; //узнаем максимальную прокрутку
elem.scrollLeft = start; //возвращаем scrollLeft назад

elem.addEventListener('scroll', scroll);
function scroll() 
{
	if (elem.scrollLeft === max) 
	{
		elem.style.color = 'red';
	} else {
		elem.style.color = 'black';
	}
}

Результат выполнения кода:

У этого элемента есть горизонтальная прокрутка

В данном примере элемент был прокручен до scrollWidth, но написать сразу 'max = elem.scrollWidth' нельзя, так как scrollWidth всегда больше максимальной прокрутки (из-за того что есть видимая часть элемента).

Смотрите также

См. также свойство scrollTop, которое содержит ширину прокрученной части элемента сверху.