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

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

screenY — це властивість об'єкта MouseEvent, яка повертає вертикальну (по осі Y) позицію курсору миші в пікселях відносно верхнього лівого кута екрана. Як і screenX, ця властивість відображає положення курсору не відносно браузера чи документа, а відносно фізичного екрана або екранів, якщо їх декілька. Вона зчитує точну координату курсору незалежно від прокручування сторінки або положення елементів.

Коли користувач виконує будь-яку дію з мишею (наприклад, натискає кнопку миші або пересуває курсор), об'єкт події MouseEvent надає доступ до кількох властивостей, серед яких є screenY. Ця властивість дозволяє розробникам відстежувати, на якій висоті екрану знаходиться курсор, що особливо корисно для створення складних інтерфейсів, таких як інтерактивні ігри, графічні редактори або будь-які програми, що потребують точного відстеження рухів миші.

Приклад використання:

document.addEventListener('mousemove', function(event) {
    console.log(event.screenY);
});

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

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

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

правити

Порада

Щоб краще розуміти співвідношення між координатами екрана і вікна браузера, використовуйте одночасно властивості screenY і clientY. Це допоможе відслідковувати позицію курсора як на рівні екрана, так і на рівні сторінки.

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

Порада

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

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

Порада

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

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

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

Синтаксис

event.screenY

Переглядачі

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

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

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

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

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

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

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

Приклади

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

let threshold = window.screen.height / 2;

document.addEventListener('mousemove', function(event) {
    if (event.screenY > threshold) {
        console.log("Курсор знаходиться в нижній частині екрана");
    } else {
        console.log("Курсор знаходиться у верхній частині екрана");
    }
});

let lastY = 0;

document.addEventListener('mousemove', function(event) {
    let deltaY = event.screenY - lastY;
    console.log("Вертикальний рух:", deltaY > 0 ? "вниз" : "вгору");
    lastY = event.screenY;
});