Размеры и скроллинг элементов в JavaScript

Александр Мальцев
Александр Мальцев
13K
0
Содержание:
  1. Размеры элемента в HTML
  2. Задачи
  3. Комментарии

Статья в разработке.

Размеры элемента в HTML

Каждый блочный элемент в HTML состоит из частей:

  • контента (content);
  • отступов (padding);
  • границ (border);
  • полей (margin).

Также стоит отметить, что когда в элементе отображается полоса прокрутки некоторые браузеры могут для её отображения отбирать соответствующее место у контента.

Рассмотрим следующий пример:

<div id="box">
  ...
</div>
<style>
  #box {
    width: 400px;
    height: 300px;
    border: 20px solid #eee;
    padding: 25px;
    overflow: auto;
  }
</style>

Вид элемента:

Свойства для получения размеров и прокрутки элемента:

  • offsetLeft и offsetTop – смещение левого верхнего угла элемента (в пикселях) относительно offsetParent;
  • offsetWidth и offsetHeight – видимая ширина и высота элемента (в пикселях), включая его отступы и границы;
  • clientLeft и clientTop – ширина левой и верхней границы элемента (если у элемента имеется полоса прокрутки и текст с ориентацией справа налево, то clientLeft включает в себя ещё ширину вертикальной полосы прокрутки, если она конечно занимает место);
  • clientWidth и clientHeight – видимая ширина и высота элемента, включающая отступы (без полос прокрутки и границ);
  • scrollWidth и scrollHeight – полная высота и ширина элемента, включая содержимое которое не отображается на экране из-за переполнения;
  • scrollLeft и scrollTop – количество пикселей, на которое прокручено содержимое элемента по горизонтали и вертикали.

Эти свойства, кроме scrollLeft и scrollTop, доступны для чтения. Т.е. они позволяют только получить различные метрики, но не установить их.

Для задания элементу ширины и высоты следует использовать стили:

<div id="box"></div>

<script>
const $box = document.querySelector('#box');
// устанавливаем ширину $box
$box.style.width = '100px';
// устанавливаем высоту $box
$box.style.height = '100px';
</script>

Свойства offsetLeft и offsetTop вычисляют значения относительно offsetParent.

offsetParent

elem.offsetParent – свойство, возвращающее элемент, который является ближайшим предком (по иерархии) для elem.

При этом предком может быть только:

  • • позиционированный элемент, т.е. такой, который имеет position отличное от static, т.е. relative, absolute, fixed или sticky;
  • <td>, <th> или <table>;
  • <body>.

offsetParent возвращает null в следующих ситуациях:

  • для <body>;
  • элемент не отображается (он или его предок имеет display:none) или его нет в документе (он создан, но не вставлен);
  • элемент имеет фиксированное позиционирование position:fixed;

Задачи

1. Устранить сдвиг при открытии модального окна

При открытии модального окна мы добавляем к body свойство overflow:hidden.

При этом, если у нас отображается вертикальная полоса прокрутки, которая занимает место, то при обрезании контента происходит смещение контента.

Эту ситуацию необходимо исправить.

Подсказки:

  • необходимо вычислить ширину прокрутки (т.к. в разных браузерах и на разных устройствах она может иметь разную ширину);
  • при открытии модального окна следует добавить к body правый margin со значением которое будет компенсировать ширину прокрутки.

Комментарии:

    Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.