JS властивість Object.pageXOffset
Загальний опис
pageXOffset - це властивість об'єкта Window в мові програмування JavaScript, яка надає інформацію про кількість пікселів, на яку сторінка була прокручена по горизонталі. Ця властивість використовується для визначення положення видимої частини сторінки відносно лівого краю документу.
pageXOffset є корисним інструментом при роботі з веб-сайтами та веб-додатками, особливо коли виникає потреба визначити положення користувача на сторінці під час використання скролінгу або взаємодії з елементами, що розташовані поза видимою областю.
Щоб використовувати pageXOffset, можна скористатися таким кодом. Нехай horizontalOffset буде змінною, яка отримає значення pageXOffset:
var horizontalOffset = window.pageXOffset || document.documentElement.scrollLeft;
console.log("Горизонтальний зсув сторінки: " + horizontalOffset + " пікселів");
У цьому прикладі ми використовуємо глобальний об'єкт window та його властивість pageXOffset. Також враховано сумісність з різними браузерами, оскільки pageXOffset може бути реалізовано різними способами.
Застосування pageXOffset виявляється в реалізації різноманітних функцій, наприклад, визначення відстані прокрутки для виконання анімацій, налаштування фіксованих елементів в залежності від положення на сторінці та вирішення завдань, пов'язаних із зміною відображення контенту при прокручуванні.
Окрім цього, можна використовувати pageXOffset у поєднанні з іншими властивостями та методами JavaScript для створення більш складних інтерфейсів та динамічних змін зовнішнього вигляду веб-сторінок в залежності від положення користувача.
| Порада: | Враховуйте |
| Порада: | Перевіряйте |
| Порада: | Застосовуйте |
Синтаксис
window.pageXOffsetЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
9.6 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач зможе прокручувати сторінку горизонтально та бачити поточне значення window.pageXOffset, яке оновлюється у реальному часі. Це демонструє динамічну роботу властивості та її використання для відстеження позиції скролу сторінки.
У цьому простому прикладі ми використали pageXOffset для отримання поточного горизонтального зміщення вікна. При кліку на кнопку з ідентифікатором "scrollButton", ми викликаємо функцію, яка прокручує до елемента з ідентифікатором "targetElement" з використанням плавної анімації.
// У цьому прикладі ми використовуємо pageXOffset для плавної анімації прокрутки до елемента на сторінці.
function scrollToElement(elementId) {
// Отримуємо елемент за його ідентифікатором
let targetElement = document.getElementById(elementId);
// Визначаємо позицію елемента відносно вікна
let targetPosition = targetElement.getBoundingClientRect().left + window.pageXOffset;
// Плавно прокручуємо до цієї позиції за допомогою анімації
window.scrollTo({
left: targetPosition,
behavior: 'smooth'
});
}
// Викликаємо функцію при кліку на кнопку з ідентифікатором "scrollButton"
document.getElementById('scrollButton').addEventListener('click', function() {
scrollToElement('targetElement');
});
У цьому прикладі ми використали подію scroll, щоб відслідковувати зміну горизонтального зміщення вікна. Кожен раз, коли вікно прокручується горизонтально, ми виводимо поточне значення pageXOffset у консоль. Також можна додати додаткову логіку для реагування на ці зміни, наприклад, для зміни стилів чи виклику інших функцій.
// У цьому прикладі ми виводимо повідомлення в консоль при зміні горизонтального зміщення вікна.
window.addEventListener('scroll', function() {
let horizontalOffset = window.pageXOffset;
// Виводимо повідомлення в консоль, показуючи поточне горизонтальне зміщення
console.log(`Горизонтальне зміщення: ${horizontalOffset}px`);
// Додаткова логіка, яка може бути виконана при зміні горизонтального зміщення
// Наприклад, змінити стилі або викликати інші функції залежно від значення pageXOffset.
});