Wie erkennt man die Sichtbarkeit der Bildlaufleiste in JavaScript?

Überprüfen der Sichtbarkeit der Bildlaufleiste

Beim Streben nach einer dynamischen Anpassung von Webelementen an die Länge des Inhalts stellt sich die Frage: Wie können wir das Vorhandensein oder Fehlen einer vertikalen Bildlaufleiste innerhalb eines überprüfen? gegebenes Element?

Das bereitgestellte jQuery-Beispiel verdeutlicht die Notwendigkeit einer solchen Prüfung: Das Skript versucht, zwischen Elementen mit reichlich Inhalt, sichtbarer Bildlaufleiste und Elementen mit begrenztem Inhalt zu unterscheiden. Hier ist eine effektive Lösung:

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

Das Plugin basiert auf dem Vergleich der Scrollhöhe des Elements (der gesamten Inhaltshöhe) und seiner sichtbaren Höhe. Wenn die Bildlaufhöhe die sichtbare Höhe überschreitet, ist wahrscheinlich eine Bildlaufleiste vorhanden.

Die Verwendung ist unkompliziert:

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

Dieser Ansatz wurde getestet und funktioniert in allen Firefox-, Chrome- und Internet Explorer-Versionen 6, 7 und 8. Bei der Anwendung auf den Tag.

Eine alternative Lösung unter Verwendung der Client-Höhe wird ebenfalls vorgestellt und behebt das Problem, dass vertikale Bildlaufleisten neben horizontalen Bildlaufleisten angezeigt werden:

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

Das obige ist der detaillierte Inhalt vonWie erkennt man die Sichtbarkeit der Bildlaufleiste in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!