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, 2018 г.
Иногда я возвращаюсь к практикам без использования jQuery, работая с DOM на чистом js. В таком контексте его называют vanila js.
Давайте рассмотрим пример создания DIV контейнера, определения его свойств, пользуясь только javascript без библиотек-оберток. ...
Читать
Ноябрь 14, 2025 г.
В этой статье мы рассмотрим, как пробросить данные из PHP в JavaScript в Drupal 11 с использованием js_settings_alter(). Этот метод позволяет изменять или добавлять переменные в объект drupalSettings, который доступен в JavaScript на всех страницах.
...
Читать
Март 26, 2016 г.
Form API в Drupal позволяет очень гибко работать с формами. Не важно где и в каком модуле была создана форма, вы всегда можете подключить собственный файл-шаблон или функцию темизации для модификации вывода этой формы.
Как это сделать читайте далее. ...
Читать
Июнь 2, 2019 г.
Вкусив однажды всех радостей от использования препроцессора, сложно себя заставить работать с нативным CSS. Посмотрим как подключить LESS к вашей теме на WP.
Т.к. уже есть готовые решения, то воспользуемся одним из них. Плагин WP-LESS сделает большую ...
Читать