Wie kann ich in JavaScript die Höhe einer horizontalen Bildlaufleiste oder die Breite einer vertikalen Bildlaufleiste bestimmen?
javascript
scrollbar
glmxndr
quelle
quelle
Antworten:
Von Alexandre Gomes Blog habe ich es nicht ausprobiert. Lassen Sie mich wissen, ob es für Sie funktioniert.
quelle
Mit jQuery können Sie die Antwort von Matthew Vines verkürzen auf:
quelle
Dies ist nur ein Skript, das ich gefunden habe und das in Webkit-Browsern funktioniert ... :)
Minimierte Version:
Und Sie müssen es aufrufen, wenn das Dokument fertig ist ... also
Getestet am 28.03.2012 unter Windows 7 in den neuesten Versionen von FF, Chrome, IE und Safari und zu 100% funktionsfähig.
Quelle: http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth
quelle
width
wird immer === das undefiniert erste Mal , wenn die Funktion aufgerufen wird. Bei nachfolgenden Aufrufen der Funktionwidth
ist diese Prüfung bereits eingestellt, diese Prüfung verhindert lediglich, dass die Berechnungen unnötig erneut ausgeführt werden.width
, sondern jedes Mal neu berechnen. Es funktioniert, aber es ist schrecklich ineffizient. Bitte tun Sie der Welt einen Gefallen und verwenden Sie stattdessen die richtige Version in Almans Plugin.Wenn Sie nach einer einfachen Operation suchen, mischen Sie einfach einfache Dom Js und JQuery.
Gibt die Größe der aktuellen Seiten-Bildlaufleiste zurück. (wenn es sichtbar ist oder sonst 0 zurückgibt)
quelle
quelle
Für mich war der nützlichste Weg
mit Vanille JavaScript.
quelle
document.documentElement.clientWidth
.documentElement
klarer und sauberer drückt die Absicht aus, das<html>
Element zu erhalten.Ich habe eine einfache Lösung gefunden, die für Elemente innerhalb der Seite anstelle der Seite selbst funktioniert:
$('#element')[0].offsetHeight - $('#element')[0].clientHeight
Dies gibt die Höhe der x-Achsen-Bildlaufleiste zurück.
quelle
Aus David Walshs Blog :
Gibt mir 17 auf meiner Website, 14 hier auf Stackoverflow.
quelle
Wenn Sie bereits ein Element mit Bildlaufleisten haben, verwenden Sie:
Wenn keine Horzintscrollbar vorhanden ist, wird die Funktion erneut gestartet
quelle
Sie können die
window
Bildlaufleistedocument
wie folgt mit jquery + javascript bestimmen :quelle
Die Art und Weise,
Antiscroll.js
wie es in seinem Code funktioniert, ist:Der Code stammt von hier: https://github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447
quelle
Getestet in Chrome, FF, IE8, IE11.
quelle
Das sollte den Trick machen, nein?
quelle
Erstellen Sie ein leeres
div
und stellen Sie sicher, dass es auf allen Seiten vorhanden ist (dh indem Sie es in das Feld einfügenheader
Vorlage einfügen).Geben Sie ihm dieses Styling:
Dann überprüfen Sie einfach die Größe
#scrollbar-helper
mit Javascript:Sie müssen nichts berechnen, da dies
div
immer daswidth
undheight
des hatscrollbar
.Der einzige Nachteil ist, dass
div
Ihre Vorlagen leer sind . Andererseits sind Ihre Javascript-Dateien sauberer, da dies nur 1 oder 2 Codezeilen erfordert.quelle
quelle
Die meisten Browser verwenden 15px für die Breite der Bildlaufleiste
quelle
Mit jquery (nur in Firefox getestet):
Aber ich mag @ Steves Antwort tatsächlich besser.
quelle
Dies ist eine großartige Antwort: https://stackoverflow.com/a/986977/5914609
In meinem Fall hat es jedoch nicht funktioniert. Und ich habe stundenlang nach der Lösung gesucht.
Schließlich bin ich zum obigen Code zurückgekehrt und habe hinzugefügt! Wichtig für jeden Stil. Und es hat funktioniert.
Ich kann unter der ursprünglichen Antwort keine Kommentare hinzufügen. Also hier ist das Update:
quelle
Diese Life-Hack-Entscheidung gibt Ihnen die Möglichkeit, die Scroll-Breite des Browsers (Vanille-JavaScript) zu ermitteln. Anhand dieses Beispiels können Sie die scrollY-Breite für jedes Element ermitteln, einschließlich der Elemente, für die gemäß Ihrer aktuellen Designkonzeption kein Scroll erforderlich sein sollte:
quelle
Hier ist die präzisere und besser lesbare Lösung, die auf dem Unterschied der Versatzbreite basiert:
Siehe die JSFiddle .
quelle
Bereits in meiner Bibliothek codiert, also hier ist es:
Ich sollte erwähnen, dass jQuery
$(window).width()
auch anstelle von verwendet werden kannwindow.document.documentElement.clientWidth
.Es funktioniert nicht, wenn Sie die Entwicklertools in Firefox auf der rechten Seite öffnen, aber es überwindet es, wenn das Entwicklerfenster unten geöffnet wird!
window.screen
wird unterstützt quirksmode.org !Habe Spaß!
quelle
Es scheint zu funktionieren, aber vielleicht gibt es eine einfachere Lösung, die in allen Browsern funktioniert?
quelle