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

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

clientY — це властивість об'єкта MouseEvent, яка повертає вертикальну координату курсора миші у пікселях відносно видимої області браузера (вікна). Властивість використовується для визначення положення курсора по вертикалі під час подій миші, таких як click, mousemove, mousedown, mouseup тощо. Вона повертає значення, яке вимірюється від верхнього краю видимої частини вікна, де нуль відповідає верхній межі області.

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

document.addEventListener('mousemove', function(event) {
    console.log(event.clientY); // Виведе вертикальну координату Y
});

Для оптимального використання clientY у великих або прокручених документах слід звертати увагу на поведінку з прокруткою. Поєднуючи clientY з іншими координатами, такими як clientX або pageY, можна створити точну обробку положення миші у видимій області.

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

Синтаксис

event.clientY

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/rNXMayN">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

document.addEventListener('mousemove', function(event) {
    let opacityElement = document.querySelector('.opacity');
    let windowHeight = window.innerHeight;
    let opacity = 1 - (event.clientY / windowHeight);
    opacityElement.style.opacity = opacity;
});

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

document.addEventListener('mousemove', function(event) {
    let progressBar = document.querySelector('.progress');
    let windowHeight = window.innerHeight;
    let progress = (event.clientY / windowHeight) * 100;
    progressBar.style.height = `${progress}%`;
});

JS довідник

JavaScript

Наповнення JS розділу