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 и размещена в рубрике Программирование.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Сентябрь 10, 2024 г.
Flex опирается на другие принципы нежели блочные контейнеры, и иной раз не понятно какими свойствами управляется дочерний контейнер во flex родителе.
Рассмотрим пример, когда у нас есть flex контейнер с двумя дочерними элементами.
[crayon-69e562d362d53953980411/] ...
Читать
Июль 6, 2023 г.
У нас есть контроллер, который выдаёт json ответ. Добавим кеширование.
Начнем с определения контроллера. Пусть сконфигурирован следующий mymodule.routing.yml:
[crayon-69e562d362f5d408654370/]
Это значит, что у нас создан класс PublicApi в ...
Читать
Декабрь 2, 2018 г.
Lessc не имеет ключа 'слежения', чтобы выполнять перекомпиляцию при изменении less файлов проекта, как например это сделано у sass компилятора. Это весьма не удобно на этапе верстки шаблона из макета.
Для отслеживания я установил UNIX утилиту inotify. ...
Читать
Май 28, 2021 г.
Небольшой сниппет (snippet) по удалению сущностей nodequeue из кода. Может быть полезно при миграции данных.
Удобно оперировать с машинным именем нод-кью, но функция удаления требует ID, потому код обычно обретает следующие формы:
[crayon-69e562d3632a6480642782/] ...
Читать