Как получить высоту только видимой части блока?

Question

[Михаил Юматов]

Столкнулся с такой задачей, нужно получать высоту видимой части блока. Как можно это сделать есть идеи?
Для понимания накидал такую инфографику)

Answer 1

[Сергей delphinpro]

простая математика. исходные данные: координаты блока относительно окна браузера (elemtnt.getBoundingClientRect()) и высота окна (window.height).

Если y_top <= 0 и y_bottom >= window.height То высота видимой части блока равна высоте экрана (первая ваша картинка).
Если y_top > 0 и y_bottom < window.height То высота видимой части блока равна высоте это блока (весь виден).
Если y_top > 0 и y_bottom > window.height То высота видимой части блока равна высоте экрана минус верхняя позиция (вторая картинка).
Если y_top < 0 и y_bottom < window.height То высота видимой части блока равна значению нижней позиции (третья картинка).

Comments

[Михаил Юматов]

Спасибо, сделал по вашему объяснению, все работает.

Answer 2

[its2easyy]

можно попробовать IntersectionObserver и в нем смотреть IntersectionObserverEntry: intersectionRatio, ratio умножать на высоту элемента и получится видимый размер.