Sizes & Scroll
-
innerHeight, outerHeight: размеры окна браузера
-
inline: CSS sizes - удобно, но не надежно
-
getComputedStyle: вычисленные свойства CSS элемента - надежно, но не удобно
-
getBoundingClientRect: вычисленные расстояния до viewport(левой и верхней границ), а также суммарная ширина и высота элемента без
margin - относителье расстояния не всегда нужны.
- размеры и расстояния для элемента:
-
offset: габариты элемента -margin +scroll, расстояние до body (top, left)
-
client: габариты элемента -margin и -scroll
-
transform: размеры при воздействии CSS transform
- Абсолютный размер - расстояние от элемента границы документа.
Такого свойства нет.
Но его можно получить зная размер документа и положение scroll
-
window scrolling
-
element scrolling
-
scroll, resize: события, влияющие на размеры и расстояния
- решение проблемы частоты возникновения событий scroll и resize: