Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie kann festgestellt werden, ob ein DIV-Element über eine sichtbare Bildlaufleiste verfügt?

Barbara Streisand
Freigeben: 2024-11-05 09:42:02
Original
378 Leute haben es durchsucht

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

Bestimmen der Sichtbarkeit der Bildlaufleiste

F: Prüfung auf automatischen Überlauf in einem DIV

Können Sie feststellen, ob ein DIV-Element vorhanden ist? Ist seine Überlaufeigenschaft auf „Auto“ gesetzt?

Beispiel:

<code class="html"><div id="my_div" style="width: 100px; height: 100px; overflow:auto;" class="my_class">
  * content
</div></code>
Nach dem Login kopieren

Im bereitgestellten JavaScript-Code-Snippet möchten Sie überprüfen, ob eine Bildlaufleiste innerhalb des DIV mit sichtbar ist die Klasse „my_class“ beim Bewegen der Maus.

A: Verwenden eines benutzerdefinierten jQuery-Plugins

Um diese Funktionalität zu erreichen, können Sie ein benutzerdefiniertes jQuery-Plugin verwenden:

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

Sie können es wie folgt verwenden:

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

Diese Methode wurde in Firefox, Chrome und IE6-8 getestet.

Hinweis: Dieses Plugin funktioniert möglicherweise nicht richtig mit dem Body-Tag-Selektor.

Alternative Lösung für horizontale Bildlaufleisten:

Wenn eine horizontale Bildlaufleiste dazu führt, dass eine vertikale Bildlaufleiste angezeigt wird, können Sie dies tun Verwenden Sie diese alternative Methode:

<code class="javascript">return this.get(0).scrollHeight > this.get(0).clientHeight;</code>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann festgestellt werden, ob ein DIV-Element über eine sichtbare Bildlaufleiste verfügt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage