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 и размещена в рубрике Программирование.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Октябрь 31, 2021 г.
У SVG изображения есть свойство preserveAspectRatio, которое управляет поддержанием пропорции. Этот атрибут так же используется в некоторых других контейнерах, например <image> и <symbol>.
По умолчанию, значение его равно xMidYMid meet, ...
Читать
Июнь 6, 2023 г.
Чтобы перенаправить на другую страницу или даже другой домен, достаточно использовать следующий код.
[crayon-6a4b3d0d17d54230044949/]
Использовать редирект на уровне кода следует только, если других возможностей перенаправления нет.
Скорее ...
Читать
Март 15, 2018 г.
Всё, что вы можете сделать из админки, может быть сделано программно. Удаление типа публикации в Drupal тоже можно сделать из кода на PHP.
Перед тем как удалить тип публикации, возможно, стоит подчистить экземпляры нод данного типа. Потому сначала ...
Читать
Июнь 14, 2021 г.
Один из компонентов Bootstrap - popover - создаёт оформление и показывает текст подсказки при нажатии на контейнер. Рассмотрим более сложный кейс использования этого компонента, а именно, создание контента для popover на лету.
Стандартный шаблон ...
Читать