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 и размещена в рубрике Программирование.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Январь 21, 2019 г.
Theme API к сожалению не даёт прямого метода, чтобы прочитать это значение. Как его получить?
Иногда программно нужно установить, что именно видит пользователь на фронт-енд (какую тему использует движок).
Необходимость возникает из-за того, ...
Читать
Июль 12, 2023 г.
Сначала вы создали в Drupal rest ресурс - /Plugin/rest/resource, поработали с ним, а потом пришло время прощаться. Но вот проблема - система уже знает о ресурсе, и если вы удалите файл, то при попытке зайти в админ панель расширений /admin/modules, вы ...
Читать
Сентябрь 17, 2019 г.
Полезное ноу-хау для тех кто пользуется jQuery. Функция $.each() производит перебор элементов по порядку, но иногда требуется выполнить операции в обратном порядке.
jQuery ничего не предлагает для реализации нашей задачи, но это и не требуется, ...
Читать
Май 6, 2010 г.
Сейчас куда ни глянь, пошла мода в качестве имени при авторизации использовать не пресловутый login, а адрес электронной почты. И это действительно удобно. Адрес почты уникален для каждого пользователя, хорошо запоминается самим пользователем и не возникает ...
Читать