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 и размещена в рубрике Программирование.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Август 17, 2017 г.
При программировании в WP мы очень часто добавляем какие то фильтры и действия. А если посмотреть в код любого плагина - это сборники реализаций зацепок.
Не всегда авторы дают возможность гибко управлять поведением их плагина через настройки. Тогда ...
Читать
Июнь 15, 2016 г.
Всем привычна схема, при которой известно имя файла, и вы совершаете с ним какие то манипуляции. В PHP много функций, которые предоставляют именно такой функционал.
Что делать, когда есть только file handle? Как получить имя открытого файла?
...
Читать
Март 7, 2014 г.
Кеширование анонимов в drupal мера сколь необходимая, столь и неудобная. Большинство страниц на сайте статичны, и использование кеша для них оправдано. Включение его может нарушить работу некоторых динамических страниц, например, страниц, где используются ...
Читать
Октябрь 25, 2023 г.
Попался мне UI баг, когда autocomplete слой с результатами поиска оказывался больше по ширине, чем input элемент, к которому он был прикреплен.
Не ясен был алгоритм, по которому вычислялась ширина слоя. В одних случаях это происходило корректно, ...
Читать