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, коли потрібні точні позиції у великих документах.

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

Порада

Значення clientY може допомогти при створенні ефектів скролу або анімацій, залежних від позиції курсора. Наприклад, для зміни висоти або кольору елементів в залежності від координат миші.

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

Порада

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

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

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

Синтаксис

event.clientY

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div class="progress">перший елемент progress</div>
<div class="progress">другий елемент progress</div>

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

<div class="opacity">перший елемент opacity</div>
<div class="opacity">другий елемент opacity</div>

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