Comment détecter la visibilité de la barre de défilement en JavaScript ?

Inspection de la visibilité de la barre de défilement

Dans le but d'adapter dynamiquement les éléments Web à la longueur du contenu, la question se pose : comment pouvons-nous vérifier la présence ou l'absence d'une barre de défilement verticale au sein d'un élément donné ?

L'exemple jQuery fourni met en évidence la nécessité d'une telle vérification : le script cherche à différencier les éléments au contenu abondant, la barre de défilement visible, et ceux au contenu limité. Voici une solution efficace :

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

Le plugin repose sur la comparaison de la hauteur de défilement de l'élément (la hauteur totale du contenu) et de sa hauteur visible. Si la hauteur de défilement dépasse la hauteur visible, une barre de défilement est probablement présente.

L'utilisation est simple :

<code class="js">$('#my_div1').hasScrollBar(); // Returns true if vertical scrollbar is visible, false otherwise.</code>

Cette approche a été testée et fonctionne sur les versions de Firefox, Chrome et Internet Explorer. 6, 7 et 8. Cependant, il échoue lorsqu'il est appliqué au tag.

Une solution alternative utilisant la hauteur du client est également présentée, résolvant le problème des barres de défilement verticales apparaissant à côté des barres de défilement horizontales :

<code class="js">return this.get(0).scrollHeight > this.get(0).clientHeight;</code>

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!