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 и размещена в рубрике Программирование.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Апрель 7, 2016 г.
Последний писк браузерной моды - адаптивный дизайн - вызван широким внедрением в быт мощных смартфонов. По количеству ядер процессора, быстродействию и ...
Читать
Июль 1, 2023 г.
№560 leetcode Subarray Sum Equals K.
Есть массив чисел, и дано значение k. Надо найти все последовательные под-массивы сумма которых равна k.
В условиях также сказано, что числа в массиве могут быть как положительные, так и отрицательные. Если ...
Читать
Ноябрь 10, 2017 г.
После очередного обновления движка WP, в секции head шаблона появилась линка на s.w.org:
[crayon-6959a28523dfc630250879/]
Что это такое и как удалить читайте далее в статье.
Dns-prefetch - это способ ускорить загрузку страницы с помощью предварительного ...
Читать
Февраль 20, 2023 г.
С появлением Гутенберга (Gutenberg), микрошаблоны вышли на новый уровень. Посмотрим пример создания собственного микрошаблона и вставки его в шаблон.
Начать надо с регистрации сайдбара, для этого вставим в functions.php темы следующий код:
[crayon-6959a2852420a629109715/] ...
Читать