zuverlässig und browserübergreifend auf Scrollbars prüfen

[edgar]

Hallo zusammen,

ich suche nach einer Möglichkeit, zuverlässig und vor allem browserübegreifend, abzufragen ob ein Fenster vertikale Scrollbars
anzeigt oder nicht. Und wenn welche standardmäßig (wie in manchen Browsern der Fall) angezeigt werden, ob diese auch aktiv sind.

Der Hintergrund:
Ich habe verschiedene Seiten, bei denen ich vorher nicht weiß wie lang sie werden, da der Inhalt teilweise dynamisch erstellt wird. Ist die Seite so lang, dass der User scrollen muss, so soll am unteren Ende der Seite ein Link mit Anker an den Seitenanfang angezeigt werden.

Ich habe zu diesem Thema viel gegoogelt und bin dabei auf folgende Lösung in JavaScript gestoßen, bei der zunächst geprüft wird, welchen Browser der User benutzt und dann die jeweilig zur Verfügung stehenden Funktionen/Attribute verwendet werden, um den Anzeigebereich und die Länge des Dokumentes zu ermitteln.

var nc  = !!(document.captureEvents && !document.getElementById);
var nc6 = !!(document.captureEvents && document.documentElement);
var ie  = !!document.all;

function scrolltest() {
  if(ie) {
    breit  = document.body.clientWidth;
    hoch   = document.body.clientHeight;
    fbreit  = document.body.scrollWidth;
    fhoch  = document.body.scrollHeight;
  }
  if (nc || nc6) {
    breit  = self.innerWidth;
    hoch   = self.innerHeight;
    fbreit  = self.document.width;
    fhoch  = self.document.height;
  }
  if(hoch < fhoch) {
    alert("Scrollbars!");
  }
  else {
    alert("Nö, keine Scrolbars!");
  }
}

Ich denke der Ansatz ist für mein Problem der richtige. Jedoch bin ich mir nicht sicher, ob mit oben stehendem Code alle bzw. möglichst viele Browser angedeckt werden. Außerdem verwirren mich die 2 Ausrufezeichen vor der öffnenden Klammer in den ersten 3 Zeilen (doppelte Negation oder was soll das bezwecken???).

Vielleicht kennt jemand eine elegantere Lösung für mein Problem.

Freue mich auf euer Feedback.

Gruß
edgar

[Christian S.]

Hi,

Ich denke der Ansatz ist für mein Problem der richtige. Jedoch bin ich mir nicht sicher, ob mit oben stehendem Code alle bzw. möglichst viele Browser angedeckt werden. Außerdem verwirren mich die 2 Ausrufezeichen vor der öffnenden Klammer in den ersten 3 Zeilen (doppelte Negation oder was soll das bezwecken???).

Die !! bezwecken nur, dass das Ergebnis in einen Boolean gecastet wird.
Das macht zwar hier wenig Sinn, da JavaScript auch nicht-boolsche Ausdrücke als true interpretiert (außer 0 und leere Strings), aber eleganter ist vielleicht trotzdem.

Ansonsten für dein eigentliches Problem ist mir keine sichere Lösung bekannt.

Ich kenne auch nur die, die du vorgeschlagen hast. Allerdings kann man das noch etwas genauer machen.

Es gibt da noch:

document.body.offsetWidth
document.documentElement.scrollWidth
document.documentElement.offsetWidth
document.documentElement.clientWidth

und noch mal für height.

Irgendwann hatte ich auch mal dafür was geschrieben. Aber jeder Browser interpretiert das wohl etwas anders.
Dazu kommt noch die Unterscheidung, ob der IE Browser im Quirksmode ist oder nicht. Manchmal rechnet IE auch noch den winzigen 2px Rahmen des Browserfensters mit ein.
Sichtbare, aber nicht genutzte Scrollbars: Ist vermutlich schwierig das festzustellen.

Gruß!

[Struppi]

Vielleicht kennt jemand eine elegantere Lösung für mein Problem.

function bodyScrollbar() {  
	var doc = document.compatMode == 'CSS1Compat' ? document.documentElement : document.body;  
	var o = doc.scrollTop;  
	doc.scrollTop += 1;  
	var n = doc.scrollTop;  
	doc.srollTop = o;  
  
	return o != n;  
}  

Struppi.