CSS свойство overflow позволяет управлять реакцией контейнера (например, DIV) при его переполнении. В некоторых случаях бывает необходимо определить факт переполнения, чтобы выполнить какие то действия.
Переполнение контейнера наступает, когда его размеры фиксированы. Т.е. мы имеем CSS вида:
|
|
div#test-container { height: 100px; overflow: hidden; } |
Как определить, что содержание контейнера выходит за его пределы, в данном примере имеет высоту более 100 точек?
|
|
//найдем объект var obj = document.getElementById('test-container'); //и вот оно решение: if (obj.scrollHeight > obj.clientHeight) { alert ('Контейнер переполнен'); } |
Аналогично можно проверить переполнение контейнера по ширине.
|
|
if (obj.scrollWidth > obj.clientWidth) .... |
А ещё лучше оформить эти проверки в виде функций:
|
|
function ifOverflowedX(obj) { return obj.scrollWidth > obj.clientWidth; } function ifOverflowedY(obj) { return obj.scrollHeight > obj.clientHeight; } |
Данная запись опубликована в 22.03.2016 22:43 и размещена в рубрике Программирование.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Апрель 14, 2025 г.
Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно ...
Читать
Март 24, 2020 г.
Для отладки или выполнения какого то разового кода иногда требуется выполнить php код в системном окружении вашего сайта на Drupal.
Без drush приходится добавлять код вроде следующего в файл темы (а в последствии его удалять от туда):
[crayon-699ffbfb19952792762128/] ...
Читать
Ноябрь 27, 2024 г.
Если сайт находится за неким прокси, который реализует SSL, а на веб-сервере при этом не настроен HTTPS протокол, то WP может начать бесконечный цикл переадресаций.
Начинается это сразу после изменения URL домашней страницы в админке.
Анамнез ...
Читать
Ноябрь 29, 2017 г.
Речь идет о том, чтобы показать изображение внутри контейнера так, чтобы оно заполнило собой весь контейнер, но при этом не изменились пропорции картинки.
Сейчас это актуально в связи с необходимостью поддержки отображения сайта на мобильных устройствах. ...
Читать