jQuery метод .scroll()

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

jQuery метод .scroll() привязывает JavaScript обработчик событий "scroll" (срабатывает при прокрутке элементов), или запускает это событие на выбранный элемент.

jQuery синтаксис:

Синтаксис 1.0:

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

$( selector ).scroll( handler )

handler - Function( Event eventObject )

Синтаксис 1.4.3:

JavaScript
$( selector ).scroll( eventData, handler )

eventData - Anything

handler - Function( Event eventObject )

Обращаю Ваше внимание, что метод .scroll(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

JavaScript
$( selector ).on( "scroll", handler )

$( selector ).trigger( "scroll" )

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

1.0 (синтаксис обновлен в версии 1.4.3)

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

Параметр Описание
eventData Объект, содержащий данные, которые будут переданы в обработчик событий.
handler Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event.

Пример старого кода

Пример использования jQuery метода .scroll() (без параметров и с функцией)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html
HTML
<button>Клик</button><span></span><br /><br />
<div style="overflow: scroll; width: 150px; height: 150px">
  Ромашка — род многолетних цветковых растений семейства Астровые, или Сложноцветные (Asteraceae), объединяет около
  двадцати видов невысоких пахучих трав, цветущих в первый год жизни. Наиболее известный вид — Ромашка аптечная
  (Matricaria chamomilla, syn. Matricaria recutita), это растение широко используется в лечебных и косметических целях.
</div>
main.js
JavaScript
$(document).ready(function () {
    $('button').click(function () {
        $('div').scroll()
    })

    $('div').scroll(function () {
        $('span')
            .text('Scroll')
            .css({
                display: 'inline',
                color: 'red',
            })
            .fadeOut('fast')
    })
})

В этом примере с использованием jQuery метода .scroll() мы при нажатии на элемент <button> (кнопка) вызываем событие "scroll" на элементе <div>, которому задали, что при срабатывании события "scroll" необходимо добавить с использованием jQuery метода .text() текстовое содержимое в элемент <span>, с использованием метода .css() установить этому элементу цвет текста красный и строчное отображение, после этого с использованием эффекта .fadeOut() плавно изменить прозрачность элемента для его скрытия.

Обратите внимание, что эффект .fadeOut() устанавливает по завершению элементу свойство display в значение none (элемент не отображается), по этой причине мы каждый раз устанавливаем, что элемент <span> должен быть строковый, для его отображения при следующем срабатывании события "scroll". При изменении положения прокрутки элемента <div> событие "scroll" будет срабатывать как и при нажатии на элемент <button>.