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 дозволяє створювати динамічні та ефективні інтерфейси, які адаптуються до дій користувача та положення на сторінці.
| Порада: | При розробці односторінкових додатків використовуйте |
| Порада: | Застосовуйте |
| Порада: | Враховуйте |
Синтаксис
window.pageYOffsetЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
9.6 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач зможе прокручувати сторінку вертикально та спостерігати за оновленням поточного значення window.pageYOffset. Це надасть інтерактивний спосіб демонстрації роботи властивості та її практичного використання для відстеження позиції скролу сторінки.
У цьому прикладі ми використали pageYOffset для визначення, на скільки сторінка була прокручена вертикально. Змінюючи стилі заголовка при прокручуванні, ми створюємо адаптивний ефект для вигляду веб-сайту.
// У цьому прикладі ми використовуємо 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 для визначення, чи користувач прокрутив сторінку до кінця. Якщо так, тоді викликається функція loadMoreContent(), яка може використовуватися для завантаження додаткового контенту, наприклад, при завантаженні нових даних з сервера.
// У цьому прикладі ми використовуємо pageYOffset для завантаження додаткового контенту при досягненні кінця сторінки.
window.addEventListener('scroll', function() {
// Отримуємо поточне вертикальне зміщення вікна
let yOffset = window.pageYOffset;
// Отримуємо висоту документа
let documentHeight = document.documentElement.scrollHeight;
// Перевіряємо, чи досягнуто кінця сторінки і завантажуємо додатковий контент
if (yOffset + window.innerHeight >= documentHeight) {
loadMoreContent();
}
});
// Функція для завантаження додаткового контенту
function loadMoreContent() {
// Реалізація логіки завантаження додаткового контенту
// Наприклад, отримання даних з сервера і їх відображення на сторінці
console.log('Завантажено додатковий контент!');
}