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

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

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

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

Щоб використовувати pageYOffset, можна скористатися таким кодом. Нехай verticalOffset буде змінною, яка отримає значення pageYOffset:

var verticalOffset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
console.log("Вертикальний зсув сторінки: " + verticalOffset + " пікселів");

У цьому прикладі ми використовуємо глобальний об'єкт window та його властивість pageYOffset. Додатково враховано різні можливості отримання значення в разі різних браузерів.

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

Комбінування pageYOffset з іншими засобами JavaScript дозволяє створювати динамічні та ефективні інтерфейси, які адаптуються до дій користувача та положення на сторінці.

правити

Порада

При розробці односторінкових додатків використовуйте pageYOffset для визначення видимої області екрану. Це дозволяє динамічно налаштовувати вміст чи ефекти при прокрутці.

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

Порада

Застосовуйте pageYOffset для створення "плавної" прокрутки на вашому веб-сайті. Використовуючи анімацію чи JavaScript, ви можете контролювати рух елементів при зміні значення цієї властивості.

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

Порада

Враховуйте pageYOffset при розробці фіксованих навігаційних панелей чи "ліпких" елементів. За допомогою цієї властивості ви можете реалізувати зміну стилів або поведінки при прокрутці сторінки вниз чи вгору.

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

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

Синтаксис

window.pageYOffset

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div id="header" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</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;
}

// У цьому прикладі ми використовуємо pageYOffset для зміни стилів елементів при прокручуванні сторінки.
window.addEventListener('scroll', function() {
  // Отримуємо поточне вертикальне зміщення вікна
  let yOffset = window.pageYOffset;

  // Отримуємо елемент, який хочемо адаптивно зміщувати
  let headerElement = document.getElementById('header');

  // Міняємо стилі елемента в залежності від вертикального зміщення
  if (yOffset > 100) {
    headerElement.style.backgroundColor = '#f1f1f1';
  } else {
    headerElement.style.backgroundColor = 'transparent';
  }
});

// У цьому прикладі ми використовуємо pageYOffset для завантаження додаткового контенту при досягненні кінця сторінки.
window.addEventListener('scroll', function() {
  // Отримуємо поточне вертикальне зміщення вікна
  let yOffset = window.pageYOffset;

  // Отримуємо висоту документа
  let documentHeight = document.documentElement.scrollHeight;

  // Перевіряємо, чи досягнуто кінця сторінки і завантажуємо додатковий контент
  if (yOffset + window.innerHeight >= documentHeight) {
    loadMoreContent();
  }
});

// Функція для завантаження додаткового контенту
function loadMoreContent() {
  // Реалізація логіки завантаження додаткового контенту
  // Наприклад, отримання даних з сервера і їх відображення на сторінці
  console.log('Завантажено додатковий контент!');
}