Обработчик “прокрутки” элементов документа .scroll()

.scroll() – устанавливает обработчик “прокрутки” элементов документа, либо, запускает это событие.

Метод имеет три варианта использования.

.scroll( handler )
  • handler — функция, которая будет установлена в качестве обработчика.
.scroll( [eventData ], handler )
  • eventData – объект содержащий данные, для передачи в обработчик. Должны быть представлены в формате {fName1:value1, fName2:value2, ...};
  • handler — функция, которая будет установлена в качестве обработчика.
.scroll()

В первых двух вариантах использования, метод является аналогом .on("scroll", handler), а в третьем случае аналогом .trigger( "scroll" ).

Событие scroll происходит, когда пользователь осуществляет прокрутку по элементу. Событие прокрутки отправляется всякий раз, когда изменяется положение прокрутки элемента, независимо от причины. Щелчок мышью или перетаскивание на полосе прокрутки, перетаскивание внутри элемента, нажатие клавиш со стрелками или использование колесика прокрутки мыши могут вызвать это событие.

Метод может быть применён для объекта window, а так же для других фрэймовых элементов, которым через CSS можно задать свойства scroll.

Дополнительно

Событие scroll() является лишь сокращением для .on("scroll", handler), поэтому убрать установленный обработчик можно с помощью .off( "scroll" )

Пример

Разместим 3 блока на странице. Блоку #target “повесим” метод обработки события scroll. Теперь при скролле этого элемента в блок #log будет добавляться надпись Handler for .scroll() called. При клике по блоку #other реализуем вызов события scroll для блока #target.

[codepen_embed height=”414″ theme_id=”0″ slug_hash=”BmQKbE” default_tab=”result” user=”AmateR”]See the Pen <a href=’https://codepen.io/AmateR/pen/BmQKbE/’>BmQKbE</a> by Aleksei (<a href=’https://codepen.io/AmateR’>@AmateR</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *