JS властивість Event.scroll
Загальний опис
scroll – це подія JavaScript, яка викликається при кожній зміні положення прокрутки на сторінці або в межах окремого елемента з можливістю прокрутки. Найчастіше подію scroll використовують для динамічного відображення інформації в залежності від положення сторінки або контейнера, наприклад, для створення ефектів паралаксу, завантаження контенту при скролінгу, приховування або відображення меню тощо. Подію scroll можна відслідковувати як для всього вікна (window), так і для певних елементів, якщо вони мають overflow: scroll або overflow: auto.
Щоб відстежити прокрутку сторінки, додають слухач події scroll до об'єкта window:
window.addEventListener("scroll", () => {
console.log("Прокрутка вікна:", window.scrollY);
});
Метод scrollY повертає кількість пікселів, на яку сторінка прокручена зверху, тоді як scrollX – зліва. За аналогією, відстеження прокрутки для елемента можна налаштувати додаванням слухача події до цього елемента:
const scrollableDiv = document.getElementById("scrollable");
scrollableDiv.addEventListener("scroll", () => {
console.log("Прокрутка елемента:", scrollableDiv.scrollTop);
});
Тут scrollTop визначає вертикальну прокрутку для елемента, тоді як scrollLeft відстежує горизонтальну прокрутку.
Оптимізація події scroll:
Оскільки подія scroll викликається дуже часто (під час кожного зміщення прокрутки), важливо оптимізувати її використання, щоб не уповільнювати роботу сторінки. Одним із підходів є застосування функції debounce або throttle, які обмежують кількість викликів функції за часом. Наприклад, бібліотека lodash надає зручний метод throttle:
window.addEventListener("scroll", _.throttle(() => {
console.log("Оптимізована прокрутка:", window.scrollY);
}, 200));
Така оптимізація допомагає уникнути перевантаження браузера зайвими обчисленнями.
Особливості роботи з мобільними пристроями:
На мобільних пристроях подія scroll також працює, але її обробка може бути менш ефективною через апаратні обмеження. Рекомендується додатково обмежувати виконання важких обчислень для події scroll, щоб зменшити навантаження на мобільні пристрої та уникнути затримок при скролінгу.
| Порада: | Використовуйте |
| Порада: | Створюйте умови для події |
| Порада: | Для плавного скролінгу використовуйте властивість |
Синтаксис
window.addEventListener("scroll", function(event) {
// Ваш код
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад дозволяє користувачеві увімкнути або вимкнути ефект прокрутки через кнопку. Текстові блоки плавно з’являються в полі зору при прокручуванні сторінки. Якщо кнопкою вимкнути ефект, анімація припиняється.
Цей приклад змінює стиль навігації при скролі більше ніж на 100 пікселів, що робить її більш компактною при прокрутці.
window.addEventListener("scroll", () => {
const nav = document.querySelector("nav");
if (window.scrollY > 100) {
nav.classList.add("scrolled");
} else {
nav.classList.remove("scrolled");
}
});Цей код реалізує ледаче завантаження зображень: зображення завантажуються тільки тоді, коли наближаються до видимої області.
window.addEventListener("scroll", () => {
const lazyElements = document.querySelectorAll(".lazy");
lazyElements.forEach((element) => {
if (element.getBoundingClientRect().top < window.innerHeight) {
element.src = element.dataset.src;
}
});
});