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

jQuery DOM методы

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

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></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() (получение значения)
Пример использования jQuery метода .scrollLeft() (получение значения)

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .scrollLeft() (установка значения)</title>
		<style></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 метода .scrollLeft() (установка значения)
jQuery DOM методы