Кратко
Секция статьи "Кратко"scroll
— это событие, когда пользователь прокручивает страницу или элемент в любой плоскости. Способами прокрутки могут быть: колесо мыши, кнопки клавиатуры, полосы прокрутки на экране.
Как пишется
Секция статьи "Как пишется"document.addEventListener('scroll', function(event) { console.log(event)})
document.addEventListener('scroll', function(event) { console.log(event) })
Как понять
Секция статьи "Как понять"Событие scroll
возникает только при прокрутке. Попробуйте листать текст в демо ниже:
scroll
использует базовый элемент события, в котором отсутствует информация о скорости прокрутки и направлении.
Чтобы понять, насколько прокрутилась страница или элемент, этот элемент получают из DOM-дерева или ключевого слова this
и запрашивают свойства scroll
или scroll
.
document.addEventListener('scroll', function() { // получаем высоту элемента, на котором произошло событие console.log(this.scrollTop)})
document.addEventListener('scroll', function() { // получаем высоту элемента, на котором произошло событие console.log(this.scrollTop) })
На практике
Секция статьи "На практике"🛠 Если вы подписались на scroll
, то приготовьтесь получать большое количество событий. Событие будет приходить примерно на каждый кадр. Поэтому в обработчике не рекомендуется производить тяжёлых вычислений и модификации DOM. Это приведёт к потере кадров при отрисовке и ощущения, что сайт тормозит.
🛠 Избежать большого количества событий scroll
можно, используя технику под названием throttling. Её смысл состоит в том, чтобы принимать следующее событие только после истечения некоторого промежутка времени.
const throttle = (func, limit) => { let lastFunc let lastRan return function() { const context = this const args = arguments if (!lastRan) { func.apply(context, args) lastRan = Date.now() } else { clearTimeout(lastFunc) lastFunc = setTimeout(function() { if ((Date.now() - lastRan) >= limit) { func.apply(context, args) lastRan = Date.now() } }, limit - (Date.now() - lastRan)) } }}// код будет срабатывать раз в 1 секундуdocument.addEventListener('scroll', throttle(function() { return console.log('Hey! It is', new Date().toUTCString())}, 1000))
const throttle = (func, limit) => { let lastFunc let lastRan return function() { const context = this const args = arguments if (!lastRan) { func.apply(context, args) lastRan = Date.now() } else { clearTimeout(lastFunc) lastFunc = setTimeout(function() { if ((Date.now() - lastRan) >= limit) { func.apply(context, args) lastRan = Date.now() } }, limit - (Date.now() - lastRan)) } } } // код будет срабатывать раз в 1 секунду document.addEventListener('scroll', throttle(function() { return console.log('Hey! It is', new Date().toUTCString()) }, 1000))