Определение переполненных элементов в div через jQuery

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

Для обнаружения переполнения в div сравните innerWidth() и innerHeight() со значением prop('scrollWidth') и prop('scrollHeight'). Если значение scrollWidth больше innerWidth, или scrollHeight превышает innerHeight, то имеет место переполнение. Ниже приведен пример кода, выполняющего данную операцию:

var $div = $('#divId'); // Вот наш div.
var overflowX = $div.innerWidth() < $div.prop('scrollWidth');
var overflowY = $div.innerHeight() < $div.prop('scrollHeight');

console.log(overflowX || overflowY ? 'Хьюстон, у нас переполнение.' : 'Все в порядке, переполнения нет.');

Замените #divId на идентификатор div, который вам требуется, и информация о переполнении будет выведена в консоли.

Продвинутые методы обнаружения

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

Отслеживание изменений

Содержимое, которое меняется динамически, может вызвать переполнение. Чтобы отследить подобные изменения, используйте обработчики событий input, resize или DOMNodeInserted.

$div.on('input resize DOMNodeInserted', function() {
  // Здесь может находиться ваша проверка переполнения из Быстрого ответа
});

Подробнее об этом расскажет наш спикер на видео

Поиск скрытых дочерних элементов

Определите дочерние элементы, которые либо полностью видны, либо частично скрыты. Вы можете вычислить их видимость, используя offsetTop, offsetLeft, offsetHeight и offsetWidth.

$.fn.isChildOverflowing = function() {
  var $parent = this;
  var parentBottom = $parent.offset().top + $parent.innerHeight();
  return $parent.find('*').filter(function() {
    var $child = $(this);
    return $child.offset().top >= parentBottom;
  }).length > 0;
};

var hasOverflowingChild = $div.isChildOverflowing();
console.log(hasOverflowingChild ? 'Внимание, ребенок выходит за границы!' : 'Все дети на виду.');

Данный метод схож с проверкой наличия каждого элемента в пределах границ своего родительского div.

Как происходит переполнение

Переполнение — это неизбежность. Главное быть готовым к такому развитию ситуации.

Стилизация переполненных элементов

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

if (overflowX || overflowY) {
    $div.addClass('overflowing');
}

Адаптивное изменение высоты

Как в знаменитой сказке, с помощью jQuery вы сможете настроить высоту div таким образом, чтобы она идеально подходила под текущее содержимое.

if (overflowY) {
    $div.height($div.prop('scrollHeight'));
}

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

Визуализация

Представьте div как прозрачную вазу (🏺), а элементы внутри неё — как разноцветные шарики (🔵🟢🔴). Когда эти шарики начинают переполнять вазу, на помощь приходит CSS:

🏺: [🔵🟢🔴🔵]  <-- Видимые шарики
   [🟢🔴🟢]    <-- Скрытые шарики

И тут на сцену выходит магия CSS, выделяющая переполненные элементы:

.overflowing {
    border: 2px solid red;
}

Назначив класс overflowing вашему div, вы визуально отметите переполнение.

Прогнозирование и реагирование на переполнение

Проактивная стратегия поможет избежать множества проблем.

Гибкость к изменениям

Содержимое постоянно изменяется. Исключите фиксированную высоту и не скрывайте переполнение. Готовьтесь к изменениям в представлении данных.

Три стадии видимости

Все дочерние элементы div могут быть либо полностью видимы, либо частично видимы, либо скрыты. При стилизации обязательно учтите это, чтобы интерфейс оставался аккуратным и приятным для глаз.

Оптимизация обновления состояния

Используйте сочетание делегирования событий и троттлинга для эффективного отслеживания и обновления состояния переполнения без замедления работы веб-приложения.

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

1. javascript – Determine if an HTML element's content overflows – Stack Overflow
2. .width() | jQuery API Documentation
3. .outerWidth() | jQuery API Documentation
4. Determining the dimensions of elements – Web APIs | MDN
5. overflow | CSS-Tricks – CSS-Tricks
6. Popping Out of Hidden Overflow | CSS-Tricks – CSS-Tricks
7. scroll event | jQuery API Documentation