JS властивість Event.screenY
Загальний опис
screenY — це властивість об'єкта MouseEvent, яка повертає вертикальну (по осі Y) позицію курсору миші в пікселях відносно верхнього лівого кута екрана. Як і screenX, ця властивість відображає положення курсору не відносно браузера чи документа, а відносно фізичного екрана або екранів, якщо їх декілька. Вона зчитує точну координату курсору незалежно від прокручування сторінки або положення елементів.
Коли користувач виконує будь-яку дію з мишею (наприклад, натискає кнопку миші або пересуває курсор), об'єкт події MouseEvent надає доступ до кількох властивостей, серед яких є screenY. Ця властивість дозволяє розробникам відстежувати, на якій висоті екрану знаходиться курсор, що особливо корисно для створення складних інтерфейсів, таких як інтерактивні ігри, графічні редактори або будь-які програми, що потребують точного відстеження рухів миші.
Приклад використання:
document.addEventListener('mousemove', function(event) {
console.log(event.screenY);
});
У цьому прикладі під час переміщення миші по екрану в консоль будуть виводитися значення координати screenY. Це значення може використовуватися для різних цілей, таких як зміна положення елементів на сторінці або динамічне реагування на переміщення курсору.
На відміну від координат вікна браузера (clientY), screenY дає глобальну позицію миші на всіх моніторах. Якщо курсор знаходиться на додатковому екрані, що знаходиться вище або нижче основного, значення screenY змінюватиметься відповідно до цього розташування. Наприклад, при використанні двох моніторів, де додатковий екран знаходиться нижче головного, значення screenY може бути більшим за висоту основного екрану, оскільки враховується висота обох моніторів.
Також важливо враховувати, що при роботі з різними екранами розмір пікселів і роздільна здатність можуть відрізнятися, тому ці координати можуть не завжди точно відповідати візуальному сприйняттю на кожному моніторі.
| Порада: | Для створення складних інтерфейсів, що реагують на положення миші, можна комбінувати |
| Порада: | Щоб краще розуміти співвідношення між координатами екрана і вікна браузера, використовуйте одночасно властивості |
| Порада: | Якщо ви використовуєте значення |
Синтаксис
event.screenYЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Користувач переміщує мишу по вертикалі, і висота блоку змінюється відповідно до поточного положення курсора відносно екрана. Висота блоку динамічно варіюється від 50 до 500 пікселів залежно від координати screenY. Це може бути корисно для створення інтуїтивно зрозумілих інтерфейсів, які реагують на рухи миші, як-от адаптивні блоки або панелі керування.
У цьому прикладі координата screenY використовується для поділу екрану на дві частини. Якщо курсор миші знаходиться у верхній частині екрана, виводиться один повідомлення, а якщо в нижній — інше. Це можна використовувати для зміни інтерфейсу залежно від положення миші.
let threshold = window.screen.height / 2;
document.addEventListener('mousemove', function(event) {
if (event.screenY > threshold) {
console.log("Курсор знаходиться в нижній частині екрана");
} else {
console.log("Курсор знаходиться у верхній частині екрана");
}
});У цьому прикладі відстежується напрямок руху курсору по вертикалі. Ми порівнюємо поточне значення screenY з попереднім, щоб визначити, чи переміщається курсор вгору або вниз. Це можна використовувати для створення інтерфейсів, що реагують на вертикальний рух миші, наприклад, для прокручування або масштабування елементів.
let lastY = 0;
document.addEventListener('mousemove', function(event) {
let deltaY = event.screenY - lastY;
console.log("Вертикальний рух:", deltaY > 0 ? "вниз" : "вгору");
lastY = event.screenY;
});