JS властивість Event.offsetY
Загальний опис
Властивість offsetY об'єкта MouseEvent повертає вертикальну координату курсора миші відносно верхньої межі елемента, на якому відбулася подія. Це дуже корисна властивість для відстеження позиції миші всередині конкретного елемента, дозволяючи точніше контролювати реакції на події, як-от кліки чи рухи миші.
Використання offsetY є особливо актуальним при роботі з інтерактивними компонентами, такими як інструменти малювання, слайдери або панелі управління, де потрібно знати точне положення миші відносно елемента. На відміну від clientY, який повертає позицію миші відносно всього вікна браузера, offsetY зосереджує увагу на конкретному елементі, що дозволяє створювати більш локалізовані та адаптивні ефекти.
Наприклад, якщо ви розробляєте інтерфейс для вертикального слайдера, offsetY дозволить легко визначити, на якій висоті елемента знаходиться миша:
const slider = document.getElementById('vertical-slider');
slider.addEventListener('mousemove', (event) => {
console.log(`Курсор на позиції Y: ${event.offsetY}`);
});
Тут кожен рух миші над слайдером відображає його вертикальну позицію у консолі. Це дозволяє відстежувати зміни і адаптивно реагувати на них, створюючи більш складну логіку на основі положення курсора. Властивість offsetY підтримується у всіх сучасних браузерах і працює з елементами, здатними отримувати події миші (як-от div, canvas, img тощо). У випадках, коли потрібно створити інструменти для малювання або аналізувати координати при кліках у графічних інтерфейсах, offsetY стає незамінним інструментом.
| Порада: | Якщо ви працюєте з елементами, що мають внутрішні відступи, врахуйте, що |
| Порада: | Враховуйте, що |
| Порада: | Пам'ятайте, що |
Синтаксис
event.offsetYЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
39 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
43 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі панель fillBar слугує індикатором, який заповнюється зеленим кольором залежно від вертикальної позиції курсора. offsetY використовується для визначення, на якій висоті перебуває миша, а відповідне значення застосовується до висоти заповнення. Це дозволяє користувачу побачити в реальному часі, як рівень заповнення змінюється під час переміщення курсора по панелі.
У цьому прикладі панель кольорів змінює свою прозорість залежно від вертикальної позиції курсора. Значення offsetY нормується від 0 до 1, що дозволяє плавно змінювати прозорість кольору, створюючи адаптивний ефект.
const colorBar = document.getElementById('colorBar');
colorBar.addEventListener('mousemove', (event) => {
const transparency = event.offsetY / colorBar.offsetHeight;
colorBar.style.backgroundColor = `rgba(0, 150, 255, ${transparency})`;
});Тут offsetY використовується для малювання горизонтальної лінії на полотні canvas відповідно до вертикальної позиції миші. Це дозволяє користувачу динамічно взаємодіяти з полотном, малюючи лінію, яка слідує за курсором.
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
canvas.addEventListener('mousemove', (event) => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(0, event.offsetY);
ctx.lineTo(canvas.width, event.offsetY);
ctx.strokeStyle = 'red';
ctx.stroke();
});