Это часть курса JavaScript 30, над которым я сейчас работаю.

Проверьте это!

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

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

Чтобы достичь этого эффекта, вам нужно знать различные вертикальные местоположения. Вот несколько советов по их поиску:

  • Чтобы узнать, прокрутил ли пользователь страницу на одну длину, то есть в нижнюю часть изначально загруженного представления: window.scrollY + window.innerHeight
  • HTMLelement.offsetTop = расстояние текущего элемента относительно верхней части элемента offsetParent
  • Нижняя часть элемента = HTMLelement.offsetTop + HTMLelement.height