Содержание:
.on( "scroll" [, eventData ], handler )Возвращает: jQuery
Описание: Привязывает обработчик события "прокрутка".
-
версия добавлена: 1.7.on( "scroll" [, eventData ], handler )
На этой странице описано событие scroll. Для устаревшего метода .scroll(), см. .scroll().
Событие scroll отправляется элементу, когда пользователь прокручивает его содержимое. Оно применяется к объектам window, а также к прокручиваемым фреймам и элементам с свойством CSS overflow установленным в значение scroll (или auto, если высота или ширина элемента явно меньше высоты или ширины его содержимого).
Например, рассмотрим HTML:
<div id="target" style="overflow: scroll; width: 200px; height: 100px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="other"> Trigger the handler </div> <div id="log"></div>
Определение стиля необходимо для того, чтобы элемент был достаточно маленьким, чтобы его можно было прокручивать:
Обработчик события scroll можно привязать к этому элементу:
$( "#target" ).on( "scroll", function() {
$( "#log" ).append( "<div>Handler for `scroll` called.</div>" );
} ); Теперь, когда пользователь прокручивает текст вверх или вниз, одно или несколько сообщений добавляются в <div id="log"></div>:
Обработчик для `scroll` вызван.
Чтобы вручную вызвать событие, используйте .trigger( "scroll" ):
$( "#other" ).on( "click", function() {
$( "#target" ).trigger( "scroll" );
} ); После выполнения этого кода щелчки по Вызвать обработчик также будут добавлять сообщение.
Событие scroll отправляется всякий раз, когда меняется положение прокрутки элемента, независимо от причины. Это событие может быть вызвано щелчком мыши или перетаскиванием полосы прокрутки, перетаскиванием внутри элемента, нажатием клавиш со стрелками или прокруткой колесиком мыши.
Пример:
Чтобы выполнить действие при прокрутке страницы:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
div {
color: blue;
}
p {
color: green;
}
span {
color: red;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<div>Try scrolling the iframe.</div>
<p>Paragraph - <span>Scroll happened!</span></p>
<script>
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( window ).on( "scroll", function() {
$( "span" ).css( "display", "inline" ).fadeOut( "slow" );
} );
</script>
</body>
</html> Демо:
.trigger( "scroll" )Возвращает: jQuery
Описание: Вызывает событие "прокрутка" на элементе.
-
версия добавлена: 1.0.trigger( "scroll" )
- "scroll"Тип: строкаСтрока
"scroll".
-
См. описание для .on( "scroll", ... ).
