Обнаружение горизонтального переполнения div с помощью JavaScript?

Question

У меня есть DIV, в котором много дочерних DIV. То, что я хочу, похоже на вкладки Firefox, когда у вас слишком много открытых вкладок или основная ширина DIV слишком мала, интерфейс обнаружит переполнение и покажет кнопку справа, чтобы вывести список всех скрытых вкладок. Проблема в том, что я понятия не имею, где вообще начать искать помощи.

Answer 1

Ваш основной DIV настроен на overflow:hidden?

Если это так, вы можете проверить необходимость переполнения, увеличив scrollLeft свойство, а затем запрашивает его, чтобы увидеть, если он изменился:

function containsTooMuch(el) {
    var original = el.scrollLeft++;
    return el.scrollLeft-- > original;
}

Answer 2

Googling выявляет это:

http://knitinr.blogspot.com/2008/08/javascript-warn-if-overflow.html

выглядит красиво и не зависит от структуры.

Но, возможно, кто-то придумает решение, которое работает с меньшим количеством кода.

О, и угадайте, какой популярный сайт сообщества программистов испортит результаты Googe для

javascript detect overflow 

:)

Answer 3

Мой подход заключается в том, чтобы работать с тем, как добавляются новые DIV. Какое бы событие ни вызвало это, я бы добавил обработчик в документ, который запускает скрипт, который проверяет размер различных DIV, чтобы убедиться, что они соответствуют вашим требованиям. Если они слишком велики (или слишком много), то вы скрываете некоторые из них и добавляете свою кнопку с ее логикой отображения.