window.scrollY в JavaScript — прокрутка сторінки згори

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

scrollY - це властивість об'єкта Window у мові програмування JavaScript, яка дозволяє отримати або встановити значення вертикальної прокрутки вікна. Ця властивість є корисною для визначення поточної позиції прокрутки на веб-сторінці та для реалізації різноманітних ефектів та взаємодій з контентом на сторінці.

Отримання значення вертикальної прокрутки може бути доцільним при розробці адаптивних додатків чи ефективних інтерфейсів. Застосування scrollY дозволяє вам реагувати на дії користувача та адаптувати відображення веб-сторінки відповідно до їхнього положення на сторінці.

Простий приклад використання scrollY може виглядати так:

// Отримати значення вертикальної прокрутки
var verticalScrollPosition = window.scrollY;
console.log('Vertical Scroll Position:', verticalScrollPosition);

Цей код просто виводить поточне значення вертикальної прокрутки в консоль. Такий підхід може бути використаний, наприклад, для відслідковування поведінки користувача при прокручуванні сторінки.

Більш складний варіант використання - це взаємодія з елементами сторінки на основі значення scrollY. Наприклад, змінюючи стиль елемента при прокрутці:

window.addEventListener('scroll', function() {
    var scrollPosition = window.scrollY;

    // Змінити стиль елемента в залежності від значення вертикальної прокрутки
    if (scrollPosition > 200) {
        // Додатковий код для зміни стилю
    } else {
        // Додатковий код для іншого стилю
    }
});

У цьому випадку, коли користувач прокручує сторінку, код реагує на зміну значення scrollY та вносить відповідні зміни у стилі певного елемента.

Також, scrollY може бути використано для плавної анімації елементів при прокручуванні сторінки. Наприклад:

// Анімація елемента при прокручуванні
window.addEventListener('scroll', function() {
    var scrollPosition = window.scrollY;
    var elementToAnimate = document.getElementById('animatedElement');

    // Застосувати анімацію на основі значення вертикальної прокрутки
    elementToAnimate.style.transform = 'translateY(' + scrollPosition + 'px)';
});

У цьому прикладі елемент з ідентифікатором animatedElement анімується відповідно до значення scrollY, створюючи ефект плавного руху при прокручуванні.

З використанням scrollY можна створити різноманітні ефекти та взаємодії, що покращують користувацький досвід на веб-сторінках.

правити

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

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

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

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

правити

Порада

Використовуйте значення scrollY для визначення відстані від верху сторінки до конкретних елементів, спрощуючи їх позиціонування на основі прокрутки.

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

Порада

Використовуйте scrollY для створення ефекту плавної анімації, адаптованої до вертикальної прокрутки. Наприклад, змінюйте прозорість чи розмір елементів при прокрутці вниз чи вгору.

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

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

Синтаксис

window.scrollY

Переглядачі

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

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

Переглядач
	1	1	1	9.6	12	9*

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

Переглядач
	4.4	18	4	1

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

Переглядач
	—

Приклади

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

<div id="navigation" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>
<div id="section-one">Демонстраційний елемент</div>
<div id="section-two">Демонстраційний елемент</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

// Отримання елементів DOM
const navigationElement = document.getElementById('navigation');
const sectionOneElement = document.getElementById('section-one');
const sectionTwoElement = document.getElementById('section-two');

// Додавання події на прокрутку вікна
window.addEventListener('scroll', function() {
  // Отримання вертикальної позиції прокрутки
  let verticalScrollPosition = window.scrollY;

  // Зміна стилів навігації в залежності від вертикальної позиції
  if (verticalScrollPosition >= sectionTwoElement.offsetTop) {
    navigationElement.classList.add('scrolled');
  } else {
    navigationElement.classList.remove('scrolled');
  }
});

<div class="nav-link">перший елемент nav-link</div>
<div class="nav-link">другий елемент nav-link</div>

// Отримання всіх посилань навігації
const navLinks = document.querySelectorAll('.nav-link');

// Додавання обробника подій для кожного посилання
navLinks.forEach(function(link) {
  link.addEventListener('click', function(event) {
    // Запобігання стандартній дії посилання
    event.preventDefault();

    // Отримання ідентифікатора розділу з атрибута href
    const targetSectionId = link.getAttribute('href').substring(1);

    // Отримання вертикальної позиції цільового розділу
    const targetSectionPosition = document.getElementById(targetSectionId).offsetTop;

    // Плавний перехід до цільового розділу
    window.scrollTo({
      top: targetSectionPosition,
      behavior: 'smooth'
    });
  });
});

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