Maison > interface Web > js tutoriel > Comment déterminer si un élément DIV a une barre de défilement visible ?

Comment déterminer si un élément DIV a une barre de défilement visible ?

Barbara Streisand
Libérer: 2024-11-05 09:42:02
original
484 Les gens l'ont consulté

How to Determine if a DIV Element Has a Visible Scrollbar?

Détermination de la visibilité de la barre de défilement

Q : Vérification du débordement automatique dans un DIV

Pouvez-vous déterminer si un élément DIV a sa propriété de débordement est définie sur auto ?

Exemple :

<code class="html"><div id="my_div" style="width: 100px; height: 100px; overflow:auto;" class="my_class">
  * content
</div></code>
Copier après la connexion

Dans l'extrait de code JavaScript fourni, vous souhaitez vérifier si une barre de défilement est visible dans le DIV avec la classe "my_class" lors du survol de la souris.

A : Utilisation d'un plugin jQuery personnalisé

Pour obtenir cette fonctionnalité, vous pouvez utiliser un plugin jQuery personnalisé :

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

Vous pouvez l'utiliser comme suit :

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

Cette méthode a été testée dans Firefox, Chrome et IE6-8.

Remarque : Ce plugin peut ne pas fonctionner correctement avec le sélecteur de balise body.

Solution alternative pour les barres de défilement horizontales :

Si une barre de défilement horizontale fait apparaître une barre de défilement verticale, vous pouvez utilisez cette méthode alternative :

<code class="javascript">return this.get(0).scrollHeight > this.get(0).clientHeight;</code>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal