JS властивість Event.pageY

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

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

Коли користувач натискає мишею або переміщує курсор, pageY зберігає інформацію про позицію в пікселях від верхнього краю сторінки. Це дає змогу відстежувати рухи миші або визначати місце, де був здійснений клік, навіть якщо сторінка прокручена вниз. Наприклад, pageY поверне значення 500, якщо курсор розташований на 500 пікселів нижче верхнього краю сторінки.

Використовувати pageY дуже просто. Щоб отримати координату, достатньо звернутися до властивості pageY об'єкта MouseEvent у межах події, наприклад, при кліку або русі миші:

document.addEventListener('click', function(event) {
    console.log("Координата Y відносно сторінки: " + event.pageY);
});

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

правити

Порада

pageY корисний при роботі з елементами, що відображаються динамічно, такими як випадаючі меню або спливаючі вікна. Ви можете легко визначити, де користувач натиснув на сторінці, і відобразити меню в цьому місці.

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

Порада

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

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

Порада

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

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

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

Синтаксис

event.pageY

Переглядачі

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

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

Переглядач
	1	1.5	1	12.1	12

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

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

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

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

Приклади

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

<div id="floatingMenu">Демонстраційний елемент</div>

const menu = document.getElementById('floatingMenu');

document.addEventListener('mousemove', function(event) {
    let yPos = event.pageY - (menu.offsetHeight / 2);
    menu.style.top = yPos + 'px';
});

<img id="scalingImage" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">

document.addEventListener('mousemove', function(event) {
    let scale = 1 + (event.pageY / window.innerHeight);
    let image = document.getElementById('scalingImage');
    image.style.transform = `scale(${scale})`;
});