Още за размерите и позицията

getBoundingClientRect() – координати спрямо viewport-а

Методът getBoundingClientRect() връща размерите и позицията на елемент спрямо видимата част на браузъра (viewport-а). За разлика от offsetTop и offsetLeft, които са спрямо родителския елемент, тук координатите се променят при скрол. Ако елементът излезе извън екрана, стойности като top и bottom могат да станат отрицателни.

Това е ключово: използвайте getBoundingClientRect(), когато ви интересува къде се намира елементът на екрана в момента, а не в документа като цяло.

Стъпка по стъпка: как да тествате поведението

1. Изберете елемент от DOM-а (например h1).
2. Извикайте метода getBoundingClientRect() върху него.
3. Запишете резултата в конзолата.
4. Скролирайте страницата и отново извикайте метода.
5. Наблюдавайте как се променят top и bottom, докато width и height остават същите.

Така ясно ще видите разликата между координати спрямо viewport и координати спрямо родител.

Основни свойства и методи

• getBoundingClientRect() – връща обект с top, bottom, left, right, width, height спрямо viewport-а
• offsetTop – разстояние от родителския елемент
• offsetLeft – хоризонтално отстояние спрямо родителя
• offsetWidth – ширина на елемента
• offsetHeight – височина на елемента

Важно уточнение: width и height от getBoundingClientRect() могат да съвпадат с offset стойностите, но отразяват реалното съдържание на елемента, включително случаи, когато вътрешни елементи излизат извън него.