Кратко
Секция статьи "Кратко"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))