Je veux détecter la présence d'une barre de défilement dans un DIV en utilisant jQuery. Je pensais utiliser $('div').scrollTop() mais cela retourne 0 dans les deux cas quand la barre de défilement est en haut et quand il n'y a pas de barre de défilement du tout.Détection de la présence d'une barre de défilement dans un DIV à l'aide de jQuery?
Des idées les gars?
En supposant overflow sur la div est auto:
var div= document.getElementById('something'); // need real DOM Node, not jQuery wrapper
var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;
var hasHorizontalScrollbar= div.scrollWidth>div.clientWidth;
Cela fonctionne aussi. Merci. Mais contrairement à mon exemple de solution que j'ai posté, Dans le monde réel je n'ai pas de "ID" pour travailler, je sélectionne le DIV en utilisant les sélecteurs CSS jQuery ... – 7wp
Ensuite, utilisez 'jQueryElement.get (0)' pour obtenir le vrai noeud DOM de celui-ci http://api.jquery.com/get. – BalusC
Alors que c'est vraiment utile, est-ce vraiment la bonne réponse, car il n'utilise pas de jQuery? –
Eh bien, je fini par trouver une solution en procédant comme suit:
Enroulez le contenu qui grandit avec un DIV, puis-je détecter si un (vertical) la barre de défilement est présente en comparant la hauteur de wrapperDiv avec la hauteur de containerDiv (qui a normalement la barre de défilement si le contenu est trop grand).
Si la hauteur de wrapperDiv est supérieure à la hauteur de containerDiv alors il y a une barre de défilement, si elle est plus petite, il n'y a pas de barre de défilement.
<DIV id="containerDiv" style="width:100px;height:100px;overflow:auto;">
<DIV id="wrapperDiv">
.... content here...
</DIV>
</DIV>
Avez-vous essayé la solution de Bobince? Il semble que cela fonctionnerait sans le div diviseur supplémentaire. –
n'était pas que la réponse du deuxième lien j'ai posté? http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery –
Oui, la solution de Bobince fonctionnerait, mais contrairement à l'exemple que j'ai donné plus haut, je n'ai pas vraiment de "ID" avec lequel travailler. Je sélectionne les sélecteurs CSS jQuery, donc je ne peux pas utiliser getElementById pour accéder à clientHeight(). plus je ne fais pas confiance à la valeur brute .clientHeight car je pense qu'elle renvoie des nombres légèrement différents dans différents navigateurs, n'est-ce pas? – 7wp
// plugtrade.com - jQuery detect vertical scrollbar function //
(function($) {
$.fn.has_scrollbar = function() {
var divnode = this.get(0);
if(divnode.scrollHeight > divnode.clientHeight)
return true;
}
})(jQuery);
exemple:
if($('#mydiv').has_scrollbar()) { /* do something */ }
Excellente solution par rapport aux nombreux autres exemples/tentatives pour résoudre ce problème. J'ai confirmé que cela fonctionne sur IE, FF et Chrome. – carrabino
Je révisera ce bobince mentionné ci-dessus puisque vous demandez jQuery
var div= $('#something');
var hasVerticalScrollbar= div[0].scrollHeight > div[0].clientHeight;
var hasHorizontalScrollbar= div[0].scrollWidth > div[0].clientWidth;
En effet, scrollHeight et scrollWidth sont des propriétés DOM.
voir http://stackoverflow.com/questions/2571514/is-detecting-scrollbar-presence-with-jquery-still-difficult –
ou http://stackoverflow.com/questions/2059743/detect-elements-overflow -using-jquery –
@moi_meme +1 Je cherchais cette question pour poster ici: p – fmsf