web-dev-qa-db-fra.com

Détecter la présence d'une barre de défilement dans une DIV en utilisant jQuery?

Je veux détecter la présence d'une barre de défilement dans une DIV à l'aide de jQuery. Je pensais utiliser $('div').scrollTop() mais cela renvoie 0 dans les deux cas lorsque la barre de défilement est en haut et lorsqu'il n'y a pas de barre de défilement.

Des idées les gars?

javascriptjqueryscrollbar
22
7wp

En supposant que overflow sur le 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;
46
bobince
// 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 */ }
18
PlugTrade.com

Eh bien, j'ai fini par trouver une solution en procédant comme suit:

Enveloppez le contenu qui grandit avec un DIV, puis je détecte si une barre de défilement (verticale) est présente en comparant la hauteur de wrapperDiv à la hauteur de containerDiv (qui comporte normalement la barre de défilement si le contenu est trop volumineux).

Si la hauteur de wrapperDiv est supérieure à la hauteur de containerDiv, il existe 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>
0
7wp

Je vais réviser ce que Bobince mentionné ci-dessus depuis que 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.

0
Musikero31