Comment détecter la visibilité de la barre de défilement dans une division avec jQuery ?

Détection de la visibilité de la barre de défilement dans un Div avec jQuery

Déterminer si un élément div a une barre de défilement active est une exigence courante dans le développement Web. Une façon d’y parvenir consiste à vérifier la propriété overflow du div. Par exemple, si le div a overflow: auto, cela signifie qu'une barre de défilement apparaîtra lorsque le contenu dépasse les dimensions du div.

Vérifier le débordement avec jQuery

Pour vérifier le propriété overflow en utilisant jQuery, vous pouvez utiliser le plugin hasScrollBar. Voici un exemple :

<code class="javascript">(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);</code>

Pour utiliser ce plugin, appelez simplement hasScrollBar() sur l'élément div :

<code class="javascript">$('#my_div1').hasScrollBar(); // Returns true if there's a vertical scrollbar, false otherwise.</code>

Cette solution fonctionne sur les principaux navigateurs, notamment Firefox, Chrome et IE6, 7 et 8. Cependant, cela ne fonctionne pas correctement pour la balise body.

Solution alternative utilisant clientHeight

Dans certains cas, notamment lorsqu'un horizontal scrollbar déclenche l'apparition d'une barre de défilement verticale, la fonction hasScrollBar peut ne pas fournir le résultat souhaité. Une approche alternative consiste à utiliser la propriété clientHeight :

return this.get(0).scrollHeight > this.get(0).clientHeight;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!