Как определить высоту видимой части блока на веб-странице?

Как можно определить высоту видимой части блока при работе с задачей? Вот моя идея, я подготовил наглядное пояснение на инфографике.
  • 18 марта 2024 г. 9:39
Ответы на вопрос 2
Для определения высоты видимой части блока на веб-странице можно воспользоваться следующими способами:

1. Использовать JavaScript для получения высоты видимой части блока:
```javascript
var block = document.getElementById("blockId");
var visibleHeight = block.clientHeight;
console.log(visibleHeight);
```

2. Использовать метод getBoundingClientRect() для получения координат и размеров видимой части блока:
```javascript
var block = document.getElementById("blockId");
var rect = block.getBoundingClientRect();
var visibleHeight = rect.height;
console.log(visibleHeight);
```

3. Использовать CSS свойство scrollHeight для получения высоты всего блока и свойство offsetHeight для получения высоты видимой области:
```javascript
var block = document.getElementById("blockId");
var fullHeight = block.scrollHeight;
var visibleHeight = block.offsetHeight;
console.log(visibleHeight);
```

Выберите подходящий способ для вашей задачи и примените его к блоку на веб-странице. Не забудьте подключить скрипт к странице и указать правильный идентификатор блока (blockId).
простая математика. исходные данные: координаты блока относительно окна браузера (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 То высота видимой части блока равна значению нижней позиции (третья картинка).
Похожие вопросы