# Свойство 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`, которое содержит ширину прокрученной части элемента сверху.

↑