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 и размещена в рубрике Программирование.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Декабрь 12, 2013 г.
Из разряда "на заметку программисту". Есть такие вещи, о которых знаешь что они есть, но забываешь конкретную реализацию, когда доходит до использования. Именно так обстоит дело с тем, что описано в заголовке. Т.е. у нас есть переменная, где хранится ...
Читать
Август 10, 2023 г.
Допустим, вы получаете следующие данные - заголовок, текст статьи, и теги. При этом данные поставляются на двух языках - 'ru' и 'en'. Вам требуется программно сохранить статью и её перевод.
Я полагаю, что уже активирован модуль Content Translation, ...
Читать
Ноябрь 5, 2016 г.
Что делать, если нужно пронумеровать строки прямо в запросе? Полистав руководство MySql 5.5, нужной функции я не нашел.
Мне нужно было сохранять позиции пользователей в рейтинге, т.е. пронумеровать пользователей в зависимости от значения их рейтинга. ...
Читать
Сентябрь 13, 2016 г.
PHP обладает целым арсеналом работы со строками. Сделать буквы заглавными или наоборот перевести в строчные - нет ничего проще.
Базовый набор функций для работы со строками содержит такие функции как:
string strtolower ( string $string );
- ...
Читать