мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

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