JavaScript scrollY — позиція вертикальної прокрутки

Властивість scrollY показує, на скільки пікселів прокручено сторінку від верху.

правити

Загальний опис

Класичні застосування — липка шапка, що змінює вигляд після прокрутки, кнопка «нагору» і смуга поступу читання.

Але обробник scroll спрацьовує дуже часто, і читання позиції в ньому змушує браузер рахувати макет. Без обмеження частоти сторінка почне смикатись.

Надійніший спосіб дізнатись «чи прокрутили до цього блоку» — узагалі не рахувати пікселі, а взяти IntersectionObserver: він асинхронний і нічого не перераховує.

правити

Порада

Просту липку шапку («тінь після прокрутки») сьогодні роблять узагалі без JavaScript — через CSS-правило animation-timeline: scroll() або position: sticky із контейнерним запитом.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
scrollY	1+	1+	1+	3+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
scrollY	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

let ticking = false;

window.addEventListener('scroll', () => {
    if (ticking) {
        return; // не рахуємо частіше, ніж малюється кадр
    }

    ticking = true;

    requestAnimationFrame(() => {
        const max = document.body.scrollHeight - window.innerHeight;
        const percent = window.scrollY / max * 100;

        progress.style.width = percent + '%';
        header.classList.toggle('scrolled', window.scrollY > 50);

        ticking = false;
    });
});