Was ist der schnellste Weg, um zu überprüfen, ob ein Element Bildlaufleisten hat?
Eine Sache ist natürlich, zu überprüfen, ob das Element größer als sein Ansichtsfenster ist, was leicht durch Überprüfen dieser beiden Werte erreicht werden kann:
el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth
Das bedeutet aber nicht, dass es auch Bildlaufleisten gibt (so dass es tatsächlich von Menschen gescrollt werden kann).
Frage
Wie suche ich in einem 1- Cross-Browser und 2- Javascript (wie in keiner jQuery ) nach Bildlaufleisten ?
Nur Javascript, weil ich so wenig Overhead wie möglich benötige, weil ich einen sehr schnellen jQuery-Auswahlfilter schreiben möchte
// check for specific scrollbars
$(":scrollable(x/y/both)")
// check for ANY scrollbar
$(":scrollable")
Ich müsste wohl nach Stileinstellungen overflow
suchen, aber wie mache ich das browserübergreifend?
Zusätzliche Bearbeitung
Nicht nur overflow
Stileinstellungen. Zu überprüfen, ob ein Element eine Bildlaufleiste hat, ist nicht so trivial, wie es scheint. Die erste Formel, die ich oben geschrieben habe, funktioniert einwandfrei, wenn das Element keinen Rand hat, aber wenn dies der Fall ist (insbesondere wenn der Rand eine beträchtliche Breite hat), offset
kann die scroll
Bemaßung größer als die Bemaßung sein, das Element kann jedoch weiterhin scrollbar sein. Wir müssen tatsächlich Ränder von der offset
Dimension subtrahieren , um das tatsächliche scrollbare Ansichtsfenster des Elements zu erhalten und dieses mit der scroll
Dimension zu vergleichen .
Zum späteren Nachschlagen
:scrollable
Der jQuery-Auswahlfilter ist in meinem .scrollintoview()
jQuery-Plugin enthalten. Den vollständigen Code finden Sie in meinem Blog-Beitrag, falls jemand ihn benötigt. Obwohl es nicht die eigentliche Lösung lieferte, half mir Soumyas Code erheblich, das Problem zu lösen. Es zeigte mir in die richtige Richtung.
quelle
overflow:hidden
gesetzt hat? Es würde überschüssigen Inhalt geben, aber es ist immer noch nicht scrollbar. Das Problem ist bei weitem nicht so einfach, wie es scheinen mag.div.scrollHeight>div.clientHeight && !(div.style.overflow && div.style.overflow == 'hidden')
)?Versuchen:
Für vertikale Bildlaufleiste
Für horizontale Bildlaufleiste
Ich weiß, dass dies zumindest für IE8 und Firefox 3.6+ funktioniert.
quelle
overflow:hidden
und es wäre nicht mehr scrollbar.overflow:hidden
... dies ist meiner Meinung nach immer noch die richtige Antwort, da es die einfachste ist.Dies mag ein wenig hackisch erscheinen (oder sein) , aber Sie können die Eigenschaften
scrollTop
und testenscrollLeft
.Wenn sie größer als 0 sind, wissen Sie, dass es Bildlaufleisten gibt. Wenn sie 0 sind, setzen Sie sie auf 1 und testen Sie sie erneut, um festzustellen, ob Sie ein Ergebnis von 1 erhalten. Setzen Sie sie dann wieder auf 0.
Beispiel: http://jsfiddle.net/MxpR6/1/
Ich glaube, es gibt eine andere Eigenschaft für IE, also werde ich in einer Minute damit aktualisieren.BEARBEITEN: Es scheint, als ob der IE diese Eigenschaft unterstützt. (Ich kann den IE momentan nicht testen.)
http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx
quelle
offsetHeight
und vergleichenclientHeight
. Letzteres ist immer um die Größe der Bildlaufleiste kleiner, wenn eine Bildlaufleiste vorhanden ist.overflow:scroll
als scrollbar gemeldet werden soll, unabhängig davon, ob die Bildlaufleisten aktiviert sind oder nicht. Natürlich könnte meine Lösung Probleme haben, wenn ein Onscroll-Ereignis angehängt ist.Hier ist noch eine andere Lösung:
Wie einige Leute betonten, reicht es nicht aus, nur offsetHeight und scrollHeight zu vergleichen, da sie sich bei Elementen mit verstecktem Überlauf usw. unterscheiden, die noch keine Bildlaufleisten haben. Hier überprüfe ich auch, ob der Überlauf bei den berechneten Stilen für das Element scrollt oder automatisch ist:
quelle
overflow*
wirdscroll
es immer eine Bildlaufleiste geben, also denke ich, dass Sie wollenvertical: overflowY === 'scroll' || overflowY === 'auto' && node.scrollHeight > node.clientHeight
usw. (dh entfernen Sie die Klammern, damitscroll*
vsclient*
nur getestet wird, wenn dies der Falloverflow*
istauto
). Ansonsten scheint dies die richtigste Lösung zu sein.Ich bin vielleicht etwas spät zur Party, aber ...
Ich glaube, Sie können Bildlaufleisten mit e.offsetWidth vs. e.clientWidth erkennen. Die versetzte Breite umfasst Rahmen und Bildlaufleisten, Auffüllung und Breite. Die Clientbreite umfasst Polsterung und Breite. Bitte sehen Sie:
https://developer.mozilla.org/en/DOM/element.offsetWidth (zweites Bild) https://developer.mozilla.org/en/DOM/element.clientWidth (zweites Bild)
Sie müssen überprüfen:
Machen Sie dasselbe für die Vertikale (Offset / ClientHeight).
IE7 meldet für einige Elemente eine clientHeight von 0 (ich habe nicht überprüft, warum), daher benötigen Sie immer die erste Überlaufprüfung.
Hoffe das hilft!
quelle
Es gibt verschiedene Probleme bei der Überprüfung des Vorhandenseins von Bildlaufleisten. Eines davon ist, dass Sie auf einem Mac keine sichtbare Bildlaufleiste haben, sodass beide oben genannten Lösungen keine genaue Antwort liefern.
Da das Rendern des Browsers nicht sehr häufig ist, können Sie den vorhandenen Bildlauf durch Ändern des Bildlaufs überprüfen und dann zurücksetzen:
quelle
Ich habe hier nur rumgespielt, da (bisher) keine der oben genannten Lösungen für mich funktioniert hat. Ich habe einige Erfolge beim Vergleich der Scrollhöhe eines Div mit seiner Offsethöhe erzielt
Es scheint mir einen genauen Vergleich zu geben ... bis jetzt. Weiß jemand, ob dies legitim ist?
quelle
Für IE11 (Internet Explorer 11) musste ich die Logik ändern in:
Dies liegt daran, dass der IE scrollHeight als 1 größer als clientHeight meldet, wenn keine Bildlaufleiste vorhanden ist, aber ungefähr 9 größer, wenn eine Bildlaufleiste vorhanden ist
quelle
Wenn Sie wissen möchten, ob eine Bildlaufleiste für die gesamte Webseite vorhanden ist und die vollständige Browserunterstützung verfügbar ist, können Sie Folgendes verwenden:
Es ist wichtig,
window.innerHeight
statt zu verwenden,document.body.clientHeight
da in einigen mobilen Browsern clientHeight nicht die Größe der Adressleiste erhält, scrollHeight jedoch, sodass Sie falsche Berechnungen erhalten.quelle
Keine dieser Antworten ist richtig. Sie müssen dies verwenden:
quelle
Fügen Sie ein 100% breites Element hinzu. Stellen Sie dann den Überlauf auf versteckt. Wenn sich der berechnete Stil des Elements (aus jQ) ändert, hatte das übergeordnete Element eine Bildlaufleiste.
EDIT: Anscheinend möchten Sie eine browserübergreifende Methode wie getComputedStyle . Versuchen:
quelle
$(el).css("overflow/overflowX/overflowY")
prüfen, ob es auf Auto oder Scrollen eingestellt ist . Ich möchte jedoch die Verwendung von jQuery vermeiden.computedStyle = el.currentStyle || document.defaultView.getComputedStyle(el, null);