JS властивість Object.scrollY

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

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 можна створити різноманітні ефекти та взаємодії, що покращують користувацький досвід на веб-сторінках.

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

Синтаксис

window.scrollY

Значення

Return

Переглядачі

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

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

Переглядач
	-	-

У цьому прикладі ми використовуємо подію прокрутки для динамічної зміни стилів навігації при прокрутці сторінки. Клас scrolled додається до навігаційного елемента, коли користувач прокручує сторінку настільки, щоб пройти через перший розділ.

// Отримання елементів 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');
  }
});

У цьому прикладі ми створюємо плавний перехід до відповідного розділу сторінки при кліці на посилання навігації. За допомогою методу scrollTo та параметра behavior: 'smooth' забезпечується анімаційний ефект плавної прокрутки.

// Отримання всіх посилань навігації
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'
    });
  });
});

JS довідник

JavaScript

Наповнення JS розділу