css.in.ua
Підтримати

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, щоб зменшити навантаження на мобільні пристрої та уникнути затримок при скролінгу.

Порада:

Використовуйте requestAnimationFrame, щоб оновлювати інтерфейс тільки в момент, коли браузер готовий до цього, покращуючи плавність прокрутки:

window.addEventListener("scroll", () => {
 requestAnimationFrame(() => {
   console.log("Плавне оновлення під час прокрутки");
 });
});
Порада:

Створюйте умови для події scroll, наприклад, щоб запускати анімацію тільки при досягненні певної частини сторінки. Це зменшує кількість непотрібних оновлень.
Порада:

Для плавного скролінгу використовуйте властивість scroll-behavior: smooth у CSS або JavaScript метод scrollTo з параметром { behavior: "smooth" }, що корисно для довгих сторінок.

Синтаксис

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;
   }
 });
});

Спільнота

Зв'язок