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 и размещена в рубрике Программирование.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Март 27, 2017 г.
Уже пошел 5й год, как я выпустил Alpha Cache. Писал этот модуль для собственных нужд, не хотелось разбираться с тонкостями настройки готовых модулей, и задача мне казалась интересной.
Последний раз обновлял модуль больше года назад, т.к. особых ...
Читать
Июль 12, 2024 г.
Медиа entity удобна для использования, но если это единственное поле изображения в статье, то как вытащить URL картинки, например чтобы заполнить шаблоны metatag?
К примеру, в вашей статье есть медиа поле - field_image, и настройки разрешают подключать ...
Читать
Ноябрь 25, 2014 г.
В drupal есть дефолтовы настройки для времени жизни кукисов и рандомной чистки сессий. Хранятся они в файле settings.php.
[crayon-6a3b34f4af5fe970071601/]
Т.е. время жизни сессии устанавливается равным более 23 дней. Если сборка мусора работает ...
Читать
Декабрь 20, 2016 г.
PHP поддерживает работу с классом DOMDocument, но есть некоторые особенности, которые требуют внимания. Одна из них - это html кодирование символов, если вы не укажете в заголовке документа мета информацию о кодировке.
Рассмотрим пример:
[crayon-6a3b34f4af774443652546/] ...
Читать