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 и размещена в рубрике Программирование.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Апрель 5, 2025 г.
Делюсь еще одним лайфхаков, как в плагине CKE5 вставить htmlentity.
При вставке текста в модель, CKEditor будет преобразовывать html символы вроде '&' и '>'. Но что делать, если нужно вставить символ в виде html кода?
Рассмотрим следующий ...
Читать
Ноябрь 25, 2014 г.
В drupal есть дефолтовы настройки для времени жизни кукисов и рандомной чистки сессий. Хранятся они в файле settings.php.
[crayon-693160bd3d6a4047878800/]
Т.е. время жизни сессии устанавливается равным более 23 дней. Если сборка мусора работает ...
Читать
Декабрь 23, 2020 г.
Время от времени продолжаю кодить под drupal 7, публикую еще один пример для работы EntityFieldQuery, на этот раз с фильтром по полю типа term reference.
Основная логика точно такая же как и при работе с data полями (где у нас хранятся тексты или ...
Читать
Ноябрь 22, 2020 г.
Искал как вытянуть стоимость позиций товара из заказа в woocommerce. А в итоге обнаружил неточность в документации плагина.
Если вы располагаете идентификатором заказа, который по сути является posd_id, то алгоритм получения данных о строках заказа ...
Читать