jQuery метод .scrollLeft()

Определение и применение

jQuery метод .scrollLeft() возвращает горизонтальную позицию прокрутки первого совпавшего элемента в наборе, или устанавливает горизонтальную позицию прокрутки всем выбранным элементам в наборе.

Горизонтальное положение прокрутки соответствует количеству пикселей, которые скрыты от глаз в левой части области прокрутки. Если полоса прокрутки прижата к левой стороне, или, если элемент не имеет прокрутки, то значение соответствует нулю.

jQuery синтаксис:

$( selector ).scrollLeft() // метод используется без параметров

$( selector ).scrollLeft( value )

value - Integer

Добавлен в версии jQuery

Значения параметров

Пример использования

<button>Клик</button>
<div></div>
<div></div>

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        console.log($('div').scrollLeft()) //  возвращаем значение горизонтальной позиции прокрутки первого совпавшего элемента <div> в наборе и выводим в консоль браузера
    })
})

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

div {
  background-color: green; /* устанавливаем цвет заднего фона */
  height: 50px; /* высота элемента */
  width: 300px; /* ширина элемента */
  margin: 20px; /* внешние отступы со всех сторон */
}

В этом примере с использованием jQuery метода .scrollLeft() мы возвращаем значение горизонтальной позиции прокрутки первого совпавшего элемента <div> в наборе и выводим в консоль браузера.

Рассмотрим пример в котором с помощью метода .scrollLeft() мы установим для элементов новое значение горизонтальной позиции прокрутки:

<button>Клик</button>
<div>Какой чудесный день. Какой чудесный пень.</div>
<div>Какой чудесный день. Какой чудесный пень.</div>

$(document).ready(function () {
    $('button').click(function () {
        $('div').scrollLeft(150)
    })
})

div {
    width: 150px;
    height: 50px;
    margin: 20px;
    overflow-x: scroll;
    white-space: pre;
}

В этом примере с использованием jQuery метода .scrollLeft() мы устанавливаем новое значение горизонтальной позиции прокрутки всех элементов <div> в наборе.