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
429 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!

source:php.cn
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