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 и размещена в рубрике Программирование.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Июнь 3, 2018 г.
Отличный плагин WP Contact form 7 известен как многофункциональное решение для конструирования пользовательских форм в Wordpress. К сожалению, единственная ...
Читать
Май 4, 2020 г.
Немного ванильного js, на этот раз: как найти контейнер по указанному классу.
Сразу рассмотрим более сложный пример, когда требуется найти элемент с классом .class-child внутри элемента .class-parent.
В DOM мы используем функцию element.getElementsByClassName(CLASSNAME), ...
Читать
Август 20, 2018 г.
В Wordpress много настроек прячется на уровне доступном только веб-разработчику. Т.е. чтобы изменить их, вам нужно хоть немного разбираться в программировании.
Это не меняет общей концепции WP как блога, готового к работе из коробки. Но вновь введенные ...
Читать
Июль 3, 2025 г.
Если вам нужно передать данные в URL в PHP, вы наверняка сталкивались с функцией urlencode(). А может быть, слышали и о rawurlencode(). И ещё третья функция — http_build_query() — всплывает в ответах на форумах и в рекомендациях официальной документации. ...
Читать