css.in.ua
Підтримати

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

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

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

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

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

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

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

Порада:

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

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

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

Синтаксис

event.pageY

Значення

Return

Переглядачі

Переглядач

1

1.5

1

12.1

12
Переглядач

37

18

4

1
Переглядач

-

-

Приклади


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

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

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

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

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

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

Спільнота

Зв'язок