J'ai vu Cette question mais on se sent comme il doit y avoir un " Nettoyant "jQuery méthode de faire cela. Je ne suis même pas sûr que cela fonctionne vraiment dans tous les scénarios. Y a-t-il un moyen pour JQuery de déterminer si un conteneur a débordement sans comparer des dimensions?
Pour clarification, existe-t-il une méthode pour tester si l'attribut CSS Overflow: Caché a été lancé et caché le contenu?
5 Réponses :
Il n'y a pas de méthode propre. Vous pouvez le faire deux emballages, l'emballage externe ayant débordement: caché et comparer les deux dimensions des wrappers, mais tout ce que vous pourriez éventuellement faire serait de faire du hacky. Si la fonctionnalité est vraiment nécessaire, alors vous devrez vivre avec les hacks.
Soupir ... Je suppose que tu as raison. Merci de votre aide. J'ai mis en place une vérification de largeur assez indolore. Je laisserai cela courir un peu pour voir si quelqu'un a une solution réelle avant d'accepter.
Je viens de surtout sur ceci, cherche à faire un menu sur une page qui n'a jamais une barre de défilement (c'est-à-dire que le corps est "fixe" à 100% de largeur / hauteur afin que je puisse coller le pied de page en bas sans se chevaucher le contenu). Je tiens à détecter si le menu déborde et, dans l'affilage, affichez un bouton pour descendre (plutôt qu'une barre de défilement orrible, de sorte qu'il glisse sans heurts avec jQuery). Je suppose que je vais aussi avoir à vivre avec les hacks aussi, à moins que l'autre réponse ne puisse faire ce dont j'ai besoin. Quoi qu'il en soit, la raison pour laquelle j'ai commencé à commenter était simplement de dire @jason que je pense que cela a couru pour un lot plus d'un moment !!
var $content = $('#content').children().wrapAll('<div>');
while($content.hasOverflow()){
var size = parseFloat($content.css('font-size'), 10);
size -= 1;
$content.css('font-size', size + 'px');
}
Cela suppose que les enfants ne sont pas inlinés, auquel cas nous devrions devoir vérifier la somme de toutes les largeurs / hauteurs.
Vous pouvez modifier les attributs CSS pour répondre à vos besoins.
$.fn.hasOverflow = function() {
$(this).css({ overflow: "auto", display: "table" });
var h1 = $(this).outerHeight();
$(this).css({ overflow: "hidden", display: "block" });
var h2 = $(this).outerHeight();
return (h1 > h2) ? true : false;
};
retour (H1> H2)? vrai: faux; est répétitif ... retour h1> h2; devrait suffire;)
... Je pense que l'index
Une solution simple que j'ai trouvée est de détecter le scrollwidth du parent parent () :
< hr> 0 se réfère au "nœud racine" du parent, obtenant la propriété à partir de là.
Il existe une autre solution (cet exemple teste si la hauteur déborde), il nécessite que le récipient de débordement soit Position: relative code>: HTML H2>
var last = $('.children:last'), container=$('#overflowing-container')
lastOffsetHeight = container.scrollTop() + last.outerHeight(true) + last.position().top;
if (last[0] && lastOffsetHeight > container[0].getBoundingClientRect().height) {
console.log("thisContainerOverflows")
}
Dupliqué possible de détecter les éléments débordement à l'aide de jQuery