Определение переполнения содержимого HTML-элемента JSом

Быстрый ответ

// Воспользуйтесь этим надежным методом для определения переполнения содержимого:
let el = document.querySelector('.element');
let overflow = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
// Ура, теперь у вас есть булева переменная, которая указывает на переполнение.

Обнаружение переполнения может быть простое!

Западни свойства overflow и их особенности

Свойство overflow со значениями visible, hidden, scroll или auto может представлять некоторые трудности. Особенно коварно поведение visible, когда контент выходит за пределы, но scrollWidth/scrollHeight остаются неизменными. Давайте обойдем эту хитрость, временно заменив overflow на hidden:

// Необходимо тщательно управлять стилями overflow:
function frenzyOverflowDetect(element) {
  let prevOverflowStyle = element.style.overflow;
  if (!prevOverflowStyle || prevOverflowStyle === 'visible') {
    element.style.overflow = 'hidden'; // Скрываем содержимое для корректного измерения
  }
  let overflowStatus = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
  // Возвращаем исходное значение overflow, пожалуйста, соблюдаем порядок.
  element.style.overflow = prevOverflowStyle;
  return overflowStatus;
}

Теперь overflow не представляет для нас никакой проблемы.

Кроссбраузерная совместимость: скажется легко, сделается трудно

Браузеры – это всегда вызов для разработчиков. Чтобы проверка переполнения была универсальной, вам потребуется:

1. Использовать обнаружение возможностей, а не определение браузера. Не полагайтесь на функции, которые браузеры не поддерживают.

2. Применять вендорные префиксы к CSS-свойствам, которые регулируют переполнение и размеры.

3. Тестировать свой код в различных браузерах. Все они уникальны, как снежинки.

Коварное переполнение и обманчивые полосы прокрутки

Полосы прокрутки, которые служат указателями, могут и вводить в заблуждение. Иногда элементы интерфейса скрывают эти полезные индикаторы. Для более точного определения переполнения рассмотрим следующий подход:

// Переполнение может быть как хищник, отбирающий полосы прокрутки в саванне браузера 🦁
function sneakyOverflowCheck(element) {
  return {
    horizontal: element.scrollWidth > element.offsetWidth,
    vertical: element.scrollHeight > element.offsetHeight
  };
}

Этот метод гарантирует определение переполнения без необходимости видимых полос прокрутки.

Концептуальная визуализация 🖼️

Визуальные образы для программистов в топку, но позвольте на мгновение представить HTML-элемент как ведро. Если содержимое ведра переливается, значит мы имеем дело с переполнением.

| Ведро (HTML элемент) | Содержимое (Вода) | Переполнение (Переливается) |
|----------------------|--------------------|-----------------------------|
| Обычное состояние    | 🪣                 | Отсутствует 🟢               |
| Состояние переполнения| 🪣💧               | Присутствует 🔴              |

Мы можем проверить это через JavaScript:

let bucket = document.querySelector('.bucket');
let isOverflowing = bucket.scrollHeight > bucket.clientHeight;

И результаты будут следующими:

- Без переполнения: 🪣🟢
- С переполнением: 🪣💧🔴

Как ведро не способно вместить неограниченное количество воды, так и размеры HTML-элемента ограничены.

Будьте осторожны: сложные случаи и лучшие практики

При определении переполнения важно учесть следующие моменты:

1. Отступы и рамки: clientWidth и clientHeight учитывают отступы, но не учитывают рамки. Переполнение происходит, если сумма размеров содержимого и отступов превышает размеры элемента.

2. Невидимые элементы: Проверяйте переполнение только после того, как элемент станет видимым на странице.

3. Динамическое содержимое: Используйте обработчики событий или **MutationObserver** для отслеживания изменений содержимого.

4. Элементы с inline-дисплеем: У таких элементов нет значений scrollWidth и scrollHeight, потому оберните их в блочный контейнер для корректного определения переполнения.

Полезные материалы

1. overflow – CSS: каскадные таблицы стилей | MDN — Подробное руководство по теме переполнения от MDN.
2. javascript – Определение переполнения содержимого HTML-элемента – Stack Overflow — Обсуждение и советы по обнаружению переполнения от разработчиков.
3. Размер элемента и прокрутка — Гид по работе с размерами и прокруткой в JavaScript.
4. Обнаружение изменений в DOM с помощью JavaScript и CSS анимаций — учимся отслеживать изменения в DOM.
5. Понимание overflow в CSS от Ахмада Шадида — Включающая детали статья о overflow.
6. Пример на Codepen: Обнаружение переполнения — Наглядная демонстрация методов обнаружения переполнения.