Подія scroll у JavaScript — прокручування сторінки

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

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

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

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

Синтаксис

window.addEventListener("scroll", function(event) {
 // Ваш код
});

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

window.addEventListener("scroll", () => {
 const nav = document.querySelector("nav");
 if (window.scrollY > 100) {
   nav.classList.add("scrolled");
 } else {
   nav.classList.remove("scrolled");
 }
});

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

window.addEventListener("scroll", () => {
 const lazyElements = document.querySelectorAll(".lazy");
 lazyElements.forEach((element) => {
   if (element.getBoundingClientRect().top < window.innerHeight) {
     element.src = element.dataset.src;
   }
 });
});

<header>
  <h2 class="title">Event.scroll</h2>
  <p class="description">Анімує текстові блоки, коли вони з'являються в області видимості під час прокрутки.</p>
</header>
<main>
  <div class="result">
    <button id="toggleScrollEffect">Увімкнути/вимкнути ефект скролу</button>
    <!-- Створення кількох текстових блоків для демонстрації ефекту прокрутки -->
    <div class="scroll-section">Секція 1 - Прокрутіть униз</div>
    <div class="scroll-section">Секція 2 - Ефект прокрутки</div>
    <div class="scroll-section">Секція 3 - Анімація при скролі</div>
    <div class="scroll-section">Секція 4 - Прокрутіть далі</div>
    <div class="scroll-section">Секція 5 - Кінець прикладу</div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  text-align: center;
}

button {
  margin-bottom: 20px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

.scroll-section {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  padding: 20px;
  margin: 50px 0;
  background: #d1e0e0;
}

.scroll-section.visible {
  opacity: 1;
  transform: translateY(0);
}

// Елементи, на які впливає ефект скролу
const sections = document.querySelectorAll(".scroll-section");
const toggleButton = document.getElementById("toggleScrollEffect");
let scrollEffectEnabled = true;

// Функція для перевірки видимості елементів під час скролу
function handleScroll() {
  sections.forEach(section => {
    const sectionTop = section.getBoundingClientRect().top;
    if (sectionTop < window.innerHeight - 50 && scrollEffectEnabled) {
      section.classList.add("visible");
    } else {
      section.classList.remove("visible");
    }
  });
}

// Додаємо слухача події прокрутки
window.addEventListener("scroll", handleScroll);

// Вимкнення та ввімкнення ефекту прокрутки за допомогою кнопки
toggleButton.addEventListener("click", () => {
  scrollEffectEnabled = !scrollEffectEnabled;
  toggleButton.textContent = scrollEffectEnabled ?
  "Вимкнути ефект скролу" :
  "Увімкнути ефект скролу";
});
//# sourceURL=pen.js