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 и размещена в рубрике Программирование.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Июль 13, 2016 г.
Что уж там говорить, Drupal грешит нестрогой машрутизацией. К примеру, вы создаёте маршрут /mypage, то Drupal направит к обработчику все запросы вида /mypage/subpage и /mypage/subpage/subpage2 и т.д.
Вы можете обратиться, к примеру, к публикации ...
Читать
Февраль 27, 2024 г.
Параграфы, оторванные от родительской entity нам не нужны, потому эта миграция является дочерней к рассматриваемому примеру миграции статей блога из CSV.
Из всего набора полей источника нам требуется только два поля - это id и body.
migrate_plus.migration.custom_text_to_paragraph.yml ...
Читать
Август 7, 2017 г.
Почти любой проект содержит параметры, которые удобно было бы вынести в админку. Это могут быть какие то переменные для шаблона или параметры для внутреннего ...
Читать
Сентябрь 21, 2021 г.
По какой то причине firefox не верно отрабатывает свойство background-size: cover для SVG.
Чтобы воспроизвести попробуйте задать стили вроде:
[crayon-6af8155e00136138111490/]
Чтобы исправить ситуацию, вы можете заменить размер фона на следующий: ...
Читать