CSS свойство overflow позволяет управлять реакцией контейнера (например, DIV) при его переполнении. В некоторых случаях бывает необходимо определить факт переполнения, чтобы выполнить какие то действия.
Переполнение контейнера наступает, когда его размеры фиксированы. Т.е. мы имеем CSS вида:
|
1 2 3 4 |
div#test-container { height: 100px; overflow: hidden; } |
Как определить, что содержание контейнера выходит за его пределы, в данном примере имеет высоту более 100 точек?
|
1 2 3 4 5 6 |
//найдем объект var obj = document.getElementById('test-container'); //и вот оно решение: if (obj.scrollHeight > obj.clientHeight) { alert ('Контейнер переполнен'); } |
Аналогично можно проверить переполнение контейнера по ширине.
|
1 |
if (obj.scrollWidth > obj.clientWidth) .... |
А ещё лучше оформить эти проверки в виде функций:
|
1 2 3 4 5 6 |
function ifOverflowedX(obj) { return obj.scrollWidth > obj.clientWidth; } function ifOverflowedY(obj) { return obj.scrollHeight > obj.clientHeight; } |