Détection de débordement div horizontal avec JavaScript?

Question

J'ai un DIV qui a beaucoup de DIVs enfants à l'intérieur de celui-ci. Ce que je veux est similaire aux onglets de Firefox, quand vous avez trop d'onglets ouverts ou que la largeur principale de DIV est trop petite, l'interface détecte un débordement et affiche un bouton sur le côté droit pour lister tous les onglets cachés. Le problème est que je ne sais pas où même commencer à chercher de l'aide.

Answer 1

Votre division DIV est-elle définie sur overflow:hidden?

Si oui, vous pouvez tester la nécessité de déborder par incrémenter la scrollLeft propriété puis interroger pour voir si elle a changé:

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

Answer 2

recherche sur Google se présente ceci:

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

est joli et cadre indépendant. Mais peut-être que quelqu'un propose une solution qui fonctionne avec moins de code.

Oh, et devinez qui se visse du site communautaire de codage populaires jusqu'à l'Googe résultats pour

javascript detect overflow 

:)

Answer 3

Mon approche serait de travailler de la façon dont les nouveaux DIVs sont ajoutés. Quel que soit l'événement qui provoque cela, j'ajouterais un gestionnaire au document qui exécute un script qui vérifie la taille des divers DIV pour s'assurer qu'ils répondent à vos besoins. Si elles sont trop grandes (ou trop nombreuses), alors vous en cachez quelques unes et ajoutez votre bouton avec sa logique d'affichage.