Как работать с прокруткой на веб-страницах

Прокрутка страницы для просмотра содержимого в нижней части страницы, вероятно, является наиболее частым событием, происходящим на странице, больше, чем щелчки или события клавиатуры.

Вы можете слушатьscrollсобытие наwindowобъект для получения информации каждый раз, когда пользователь прокручивает страницу:

window.addEventListener('scroll', event => {
  // scroll event detected
})

Внутри обработчика событий вы можете проверить текущую позицию вертикальной прокрутки, установив флажокwindowсвойствоwindow.scrollY, а горизонтальная прокрутка с помощьюwindow.scrollX.

window.addEventListener('scroll', event => {
  console.log(window.scrollY)
  console.log(window.scrollX)
})

Имейте в виду, чтоscrollмероприятие не разовое.

Он срабатывает много раз во время прокрутки, а не только в конце или начале прокрутки, поэтому возникает проблема, если вам нужно выполнить какую-либо операцию.

Вы не должны напрямую выполнять какие-либо вычисления или манипуляции в обработчике событий обработчика, но мы должны использоватьудушениевместо.

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

Вscrollсобытие не запускается один раз для каждого события, а скорее они постоянно вызывают свою функцию обработчика событий в течение всего действия.

Это потому, что он предоставляет координаты, чтобы вы могли отслеживать, что происходит.

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

Библиотеки, которые обеспечивают регулирование, напримерЛодашреализовать его в более чем 100 строках кода для обработки всех возможных вариантов использования. Это простая и понятная реализация, в которой используетсяsetTimeoutдля кеширования события прокрутки каждые 100 мс:

let cached = null
window.addEventListener('scroll', event => {
  if (!cached) {
    setTimeout(() => {
      //you can access the original event at `cached`
      cached = null
    }, 100)
  }
  cached = event
})

Регулировка также применяется кmousemoveсобытие, которое мы видели в уроке событий мыши. То же самое - это событие запускается несколько раз при перемещении мыши.

Вот пример на Codepen:

См. ПероПрокрутка событийАвтор: Флавио Коупс (@flaviocopes) наCodePen.