jQuery метод .sсrollLeft()

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

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

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

jQuery синтаксис:

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

$( selector ).sсrollLeft( value )

value - Integer

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

1.2.6

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

Параметр	Описание
value	Определяет горизонтальную позицию прокрутки в пикселях.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .scrollLeft() (получение значения)</title>
		<style>div {
background-color: green; /* устанавливаем цвет заднего фона */
height: 50px; /* высота элемента */
width: 300px; /* ширина элемента */
margin: 20px; /* внешние отступы со всех сторон */
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $("button").click(function(){ // задаем функцию при нажатиии на элемент <button>
	    console.log( $( "div" ).scrollLeft() ); //  возвращаем значение горизонтальной позиции прокрутки первого совпавшего элемента <div> в наборе и выводим в консоль браузера
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<div></div>
		<div></div>
	</body>
</html>

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

Результат нашего примера:

Пример использования jQuery метода .scrollLeft() (получение значения)

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .scrollLeft() (установка значения)</title>
		<style>div {
height: 50px; /* высота элемента */
width: 150px; /* ширина элемента */
margin: 20px; /* внешние отступы со всех сторон */
overflow-x: scroll; /* переполнение обрезается по оси x, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров */
white-space: pre; /* все пробелы и переносы строк сохраняются (текст может выходить из отведённой области). Значение свойства действует как одноимённый элемент <pre> */
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $("button").click(function(){ // задаем функцию при нажатиии на элемент <button>
	   $( "div" ).scrollLeft( 150 ); //  устанавливаем новое значение горизонтальной позиции прокрутки всех элементов <div> в наборе
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<div>Какой чудесный день. Какой чудесный пень.</div>
		<div>Какой чудесный день. Какой чудесный пень.</div>
	</body>
</html>

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

Результат нашего примера:

Пример использования jQuery метода .scrollLeft() (установка значения)

jQuery DOM методы