Как получить высоту только видимой части блока?
Столкнулся с такой задачей, нужно получать высоту видимой части блока. Как можно это сделать есть идеи?
Для понимания накидал такую инфографику)
Дополнительно:
простая математика. исходные данные: координаты блока относительно окна браузера (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 То высота видимой части блока равна значению нижней позиции (третья картинка).
- Спасибо, сделал по вашему объяснению, все работает.
Ответы:
можно попробовать IntersectionObserver и в нем смотреть IntersectionObserverEntry: intersectionRatio, ratio умножать на высоту элемента и получится видимый размер.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы получить высоту только видимой части блока, можно воспользоваться свойством `clientHeight` элемента. Это свойство возвращает высоту видимой части элемента в пикселях, включая padding, но без border, margin или прокрутки.
Пример использования в JavaScript:
```html
Содержимое блока
var element = document.getElementById("myDiv");
var visibleHeight = element.clientHeight;
console.log(visibleHeight);
```
Если вы хотите получить высоту видимой части блока при наличии прокрутки, то нужно использовать свойство `offsetHeight`. Это свойство возвращает полную высоту элемента, включая видимую и скрытую части (если они есть).
Пример использования в JavaScript:
```html
Длинное содержимое блока, которое не помещается в видимой части
var element = document.getElementById("myDiv");
var visibleHeight = element.offsetHeight - (element.scrollHeight - element.clientHeight);
console.log(visibleHeight);
```
Таким образом, используя свойства `clientHeight` или `offsetHeight`, вы можете получить высоту только видимой части блока в зависимости от ваших потребностей.