Определение переполнения контента в элементе CSS: решение

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

Вы можете определить есть ли переполнение в элементе с помощью свойств clientWidth, clientHeight, scrollWidth и scrollHeight:

const isOverflowing = el => el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;

Использовать эту функцию можно следующим образом:

console.log(isOverflowing(document.querySelector('.my-element')) ? 'Произошло переполнение! 🌊' : 'Всё в порядке 🌈');

А вот использование метода дебаунсинга может помочь улучшить производительность при работе с динамическим контентом, позволяя сократить количество вызовов функций, особенно в процессе обработки событий resize и scroll.

Основные моменты в работе с переполнением

Функция обнаружения переполнения

Напишите функцию isOverflown, которая будет помогать обнаруживать переполнение в различных элементах. Она поможет сделать ваш код более удобочитаемым, а вам даст славу сыщика переполнений 🕵️‍♂️.

const isOverflown = element => (element.scrollHeight > element.clientHeight) || (element.scrollWidth > element.clientWidth);

Array.from(document.querySelectorAll('.might-overflow')).forEach(el => {
  console.log(isOverflown(el) ? `Элемент c id=${el.id} переполнен 🌊` : `Элемент c id=${el.id} без переполнений 👍`);
});

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

Реакция на изменение динамического контента

Увидеть переполнение при изменении содержимого можно с помощью обработчиков событий DOM, таких как resize или mutation:

window.addEventListener('resize', () => {
  document.querySelectorAll('.might-overflow').forEach(el => {
    toggleMoreButton(el, isOverflowing(el));
  });
});

CSS-индикаторы переполнения

Улучшите пользовательский опыт, визуально сообщая о переполнении. Изменение цвета границы или добавление тени могут быть вам в помощь 🧙‍♀️.

.might-overflow { border: 2px solid black; }
.overflowing { border-color: red; /* Красный цвет — сигнал 🚨 переполнения */ }

Используйте JavaScript для добавления или удаления классов, соответствующих статусу переполнения:

isOverflown(element) ? element.classList.add('overflowing') : element.classList.remove('overflowing');

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

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

Видимое: [ 📄 📄 ]

Но на деле: [ 📄 📄 📄 📄 📄 ] // Слишком много бумаги для этой папки 🗂️!

В этом случае scrollHeight элемента значительно превышает его clientHeight.

Код будет выглядеть так:

element.scrollHeight > element.clientHeight; // Больше ли контента в документе, чем отображается? 🤔

Визуализация переполнения:

Мы видим: [ 📄 📄 ]

Но на самом деле: [ 📄 📄 📄 📄 📄 ] // Да, там есть скрытый контент!

Держите под контролем скрытые 📄📄📄 и вы обнаружите переполнение!

Детальное рассмотрение обработки переполнения

Визуальные индикаторы

Сделайте интерфейс более информативным с помощью теней при прокрутке или используйте CSS-градиенты, установив для background-attachment значение local. Это позволит отобразить переполнение:

.might-overflow {
    background-attachment: local, scroll, scroll;
}

Ограничение содержимого с помощью CSS

Вы можете использовать CSS-сетки и установить максимальную высоту с помощью max-height. Это, в сочетании со свойством overflow, предотвратит выход контента за границы:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); // Сетка готова к работе!
    gap: 10px;
}
.grid-item {
    max-height: 300px; // Определяем предел! 🙌
    overflow: auto; // Если не укладываешься – прокручивай! 📜
}

Адаптация интерфейса к динамическому изменению

Если контент выходит за пределы, добавьте кнопку "ещё" или аналогичный элемент GUI:

const toggleMoreButton = (el, isOverflowing) => {
    const moreButton = el.querySelector(".more-button");
    moreButton.style.display = isOverflowing ? 'block' : 'none';
};

Для повышения удобства использования можно менять текст кнопки, создавая эффект интерактивности.

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