Як отримати висоту блоку? Його положення щодо меж документа?

Повне пояснення

Що це і навіщо

• offsetHeight – фізична висота елемента, включаючи padding, border і scrollbar (не margin). Використовується, коли потрібна реальна розмірність елемента у вікні.
• getBoundingClientRect() повертає об’єкт з координатами елемента відносно viewport. Додаючи window.pageYOffset (scrollY), отримуємо координату відносно верхньої межі документа.

Ключові принципи

• offsetHeight – синхронний доступ, не потребує рендеру.
• getBoundingClientRect() – повертає дробові значення, тому для точності можна округлити.
• pageYOffset (або scrollY) – поточна вертикальна прокрутка.

Як це працює

1. Визначаємо елемент через document.querySelector або інший метод.
2. Отримуємо висоту: element.offsetHeight → число в пікселях.
3. Отримуємо позицію: element.getBoundingClientRect().top → відстань до верхньої межі viewport.
4. Коригуємо на прокрутку: + window.pageYOffset → абсолютна позиція відносно документа.

Практика і реалізація (JS/TS)

const el = document.querySelector('#myBlock') as HTMLElement;
if (el) {
  const height = el.offsetHeight; // 200
  const topFromDoc = el.getBoundingClientRect().top + window.pageYOffset; // 350
}

• У TypeScript тип HTMLElement гарантує доступ до властивостей.

Тестування

• Jest: можна мокати getBoundingClientRect і pageYOffset.

jest.spyOn(window, 'pageYOffset', 'get').mockReturnValue(100);
const mockRect = { top: 50, left: 0, width: 100, height: 200 } as DOMRect;
jest.spyOn(el, 'getBoundingClientRect').mockReturnValue(mockRect);
const top = el.getBoundingClientRect().top + window.pageYOffset; // 150

• Playwright: перевіряємо реальну позицію після прокрутки.

Оптимізація

• Якщо потрібна лише висота, використовуйте offsetHeight – мінімальна операція.
• Для позиції можна кешувати результат, якщо елемент не змінюється під час прокрутки.

Часті помилки

1. Використання clientHeight – не враховує border.
2. Забудьте про pageYOffset – отримаєте позицію відносно viewport, а не документа.
3. Не враховуєте scrollTop у старих браузерах.
4. Використання offsetTop – повертає позицію відносно батьківського елемента, а не документа.
5. Дробові значення – при порівнянні треба округлити.
6. Проблеми з display:none – висота буде 0.
7. Проблеми з transform – getBoundingClientRect() враховує трансформації.
8. Проблеми з position:fixed – позиція відносно viewport, тому треба враховувати прокрутку.

Дизайн‑рішення

• Для динамічних елементів, що змінюються в розмірі, використовуйте ResizeObserver.
• Для позиційних обчислень у реактивному UI – розгляньте useLayoutEffect в React.

Підсумок

Отримання висоти та позиції елемента відносно документа вимагає двох простих властивостей: offsetHeight і сумарної прокрутки (pageYOffset). Це фундаментальний інструмент для розрахунків layout‑у, анімацій і lazy‑loading.