Scrollbalkenbreite

[Gernot Back]

Hallo Mitstreiter!

Also, vor kurzem wurde die Frage nach der Scrollbalkenbreite hier ja schon einmal gestellt,

http://forum.de.selfhtml.org/archiv/2004/7/85124/#m500419

aber da hatte ich ja schon angedroht, dass ich die Frage noch einmal stellen würde, für den Fall dass sich nicht genug Leute auf die Frage melden würden:

Kann man mittels JavaScript die Scrollbalkenbreite ermitteln?

Ich habe herumexperimentiert mit zwei Differenzen:

javascript:alert(document.body.offsetWidth-document.body.clientWidth)
(funktioniert in fast allen Browsern)

und

javascript:alert(outerWidth-innerWidth)
(funktioniert nicht im IE)

Wenn man beides oben in die Adresszeile eintippt (ihr könnt es euch ja auch dahin kopieren, wisst ja wie das geht), dann kommen in ersterem Fall bei Seiten mit vertikalem Scrollbalken oft Werte von plus oder minus 16/17 heraus, in leterem Fall auch schon mal sowas um die 8.

Bei Seiten ohne Scrollbalken kommt oft 0 heraus, je nach Browser aber auch schon mal plus oder minus 4.

Um einen Scrollbalken zu erzeugen, gebt einfach mal bei Google den Begriff "sex" als Suchbegriff ein, dann bekommt ihr Millionen von Seiten und daher auch einen Scrollbalken. Um keinen Scrollbalken zu haben, tja, da weiß ich auch nicht, was ihr zuverlässigerweise machen könnt, aber ihr kennt bestimmt Seiten ohne Scrollbalken.

Meine Frage: Haben diese Differenzen zwischen outerWidth und innerwidth bzw. document.body.offsetWidth und document.body.clientWidth etwas mit der Scrollbalkenbreite zu tun? Ich glaube ja, dass sie um die 13 Pixel beträgt und dass man  von den 16/17 Pixeln noch 4 für den Außenrahmen des Fensters abziehen muss)

Testet das mal mit euren diversen Browsern auf unterschiedlichen Betriebssystemen. Ich brauche die Werte nämlich für ein Projekt, zu dem ich auch für SELFhtml etwas schreiben will:

http://www.sprachlernspiele.de/dynframe

Danke für eure Mithilfe

Gruß Gernot

[MudGuard]

Hi,

javascript:alert(document.body.offsetWidth-document.body.clientWidth)

-16, egal ob mit oder ohne Scrollbar.

javascript:alert(outerWidth-innerWidth)

8, egal ob mit oder ohne Scrollbar.

(jeweils Mozilla 1.7/Win2K, mit eingestellter und nachgemessener Scrollbalkenbreite von 12)

Um einen Scrollbalken zu erzeugen, gebt einfach mal bei Google den Begriff "sex" als Suchbegriff ein, dann bekommt ihr Millionen von Seiten und daher auch einen Scrollbalken.

Wie wäre es mit dem näherliegenden http://forum.de.selfhtml.org/ ?

Meine Frage: Haben diese Differenzen zwischen outerWidth und innerwidth bzw. document.body.offsetWidth und document.body.clientWidth etwas mit der Scrollbalkenbreite zu tun?

Sieht für mich nicht so aus.

Ich glaube ja, dass sie um die 13 Pixel beträgt und dass man  von den 16/17 Pixeln noch 4 für den Außenrahmen des Fensters abziehen muss)

16 minus 4 ist also 13?

cu,
Andreas

[Gernot Back]

Hallo Andreas,

das sieht für Mozilla dann wohl in der Tat schlecht aus, aber wie ist es denn mit anderen Browsern, Frage an alle?

Gruß Gernot

[Orlando]

Hi Gernot,

das sieht für Mozilla dann wohl in der Tat schlecht aus, aber wie ist es denn mit anderen Browsern, Frage an alle?

was spuckt denn der M$IE aus, nachdem eine Seite gezoomt wurde?

http://www.free-solutions.de/js/ie_css_zoom.htm

Grüße,
 Roland

[Gernot Back]

Hallo Roland,

danke für den Tipp. Ja das ist wirklich seltsam, beim auszoomen (verkleinern) bleibt es bei 17 Pixeln, beim einzoomen (vergrößern) auch teilweise gibt es aber dabei auch Fehlermeldungen in der Statuszeile, es erscheint ein weißer Bildschirm und es kommt auch kein Alert. Ich weiß aber nicht, ob der Zoom wirklich relevant ist, ich meine das macht man ja doch eher selten, ich habe es auf meiner Seite auch nicht vor anzubieten. Außerdem ist Zoom womöglich nur ein Darstellungseffekt, mit dem quasi andere Bildschirmauflösungen simuliert werden.

Gruß Gernot

[Gernot Back]

Hallo nochmal Andreas,

also ich werde bald wahnsinnig, bei mir kommt bei

javascript:alert(document.body.offsetWidth-document.body.clientWidth)

im Mozilla Classic-Theme 969(px) raus, im Modern-Theme hingegen 0(px), was hat das alles zu bedeuten? Ich mach mir keinen Reim drauf!

Gruß Gernot

[MudGuard]

Hi,

also ich werde bald wahnsinnig, bei mir kommt bei
javascript:alert(document.body.offsetWidth-document.body.clientWidth)
im Mozilla Classic-Theme 969(px) raus, im Modern-Theme hingegen 0(px), was hat das alles zu bedeuten? Ich mach mir keinen Reim drauf!

Nein, ich werde mein sorgsam eingerichtetes MicroMozilla-Theme jetzt nicht durch ein anderes ersetzen, nur um zu sehen, ob das andere Werte ergibt. Das Risiko, daß nach dem Zurückschalten irgendwas nicht mehr so ist wie vorher ist mir zu groß.

Mein Fazit: es ist nicht sicher möglich, die Scrollbalkenmaße zu ermitteln.

cu,
Andreas

[Gernot Back]

Hallo Andeas!

Nein, ich werde mein sorgsam eingerichtetes MicroMozilla-Theme jetzt nicht durch ein anderes ersetzen, nur um zu sehen, ob das andere Werte ergibt. Das Risiko, daß nach dem Zurückschalten irgendwas nicht mehr so ist wie vorher ist mir zu groß.

Dafür habe ich Verständnis!

Mein Fazit: es ist nicht sicher möglich, die Scrollbalkenmaße zu ermitteln.

Da bin ich mir noch nicht so sicher, vielleicht sind andere ja mutiger als du!
;-)

Gruß Gernot

[MudGuard]

Hi,

Mein Fazit: es ist nicht sicher möglich, die Scrollbalkenmaße zu ermitteln.
Da bin ich mir noch nicht so sicher, vielleicht sind andere ja mutiger als du!

Schau Dir doch den Verhau an Werten an, den Du bis jetzt erhalten hast ...

Ich sehe vor allem auch nur zwei Szenarien, in denen die Scrollbalkenbreite relevant sein könnte:

1. Frames (Zentrierung in 2 Frames, einer mit, einer ohne Scrollbar ==> verschiedenes Zentrum).
Frames benutze ich so gut wie nie. In dem einen Fall, in dem ich es tu, ist mir das Aussehen relativ wurscht ==> Scrollbalkenbreite irrelevant.

2. Pixelgenaues Design. Benutze ich auch nicht.

cu,
Andreas

[Gernot Back]

Hallo Andreas,

ich wollte dich überhaupt nicht angreifen.

Frames benutze ich so gut wie nie.

Da sprechen ja in aller Regel auch gute Gründe dafür.

2. Pixelgenaues Design. Benutze ich auch nicht.

Ich weiß, ich bin ein Korinthenkacker, aber so bin ich nun mal!

Gruß Gernot

[Struppi]

javascript:alert(document.body.offsetWidth-document.body.clientWidth)
(funktioniert in fast allen Browsern)

firefox
-16 mit oder ohne Scrollbalken im Quirks mode.
0  m. oder o. Scrollbalken im strict Mode.

16 im Opera.

kann der IE javascript in der URL?

und

javascript:alert(outerWidth-innerWidth)
(funktioniert nicht im IE)

10 immer, im firefox und Opera.

Struppi.

[Gernot Back]

Hallo Struppi!

Vielen Dank für deine Tests. Ich habe auch neue Erkenntnisse gewonnen:

Bei Opera und MSIE scheint sich tatsächlich die Scrollbalkenbreite über JS ermitteln zu lassen:

Opera liefert bei
javascript:alert(document.body.offsetWidth-document.body.clientWidth)
genau die 13 Pixel, die sich bei mir in einem Screensot auch nachmessen lassen.

MSIE liefert mit Scrollbalken bei derselben Rechnung 17Pixel, bei Unterdrückten Scrollbalken mit <body style="overflow:hidden"> hingegen 4Pixel, also die Werte für den Außenrahmen, die wenn man sie von den 17Pixeln abzieht, wieder nachzumessende 13Pixel für den Scrollbalken ergeben.

Mozilla&Co liefern bei derselben Rechnung hingegen betragsmäßig immer exakt das Doppelte dessen, was man im nicht-validen Body-Attribut "marginwidth" einstellt. Dort hat die Rechnung also definitiv nichts mit Scrollbalken zu tun.

Bei mozillaartigen scheint aber die andere Rechnung
javascript:alert(innerWidth-outerWidth)
interessant. Je nachdem, in welchem Theme (Classic, Modern oder sonst noch was) man ist, liefert diese Rechnung verschiedene Werte, aber unabhängig von Scrollbalken. Im Vollbildmodus kommen dabei betragsmäßig jeweils geringere positive oder negative Werte heraus. Das scheint also etwas mit dem Außenrahmen zu tun haben. Für Mozilla&Co kann man die Ermittlung der Scrollbalkenbreite also wohl tatsächlich vergessen.

Oder hat noch jemand andere Ideen, über welche Werte man das dort abfragen könnte? Da je nach Browser-Theme die Scrollbakenbreite bei mozillaartigen ja sehr schwankt (bei Opera nicht), wäre es gerade für jene Browser wichtig im Zusammenhang mit meinem Projekt:

http://www.sprachlernspiele.de/anzeige/tabelle.html

Meine Tests habe ich jetzt übrigens an einer Seite ohne Doctype-Deklaration gemacht, also im Quirks-Mode. Den anderen Modus nehme ich mir für morgen vor, es gibt ja noch etwas anderes als Programmieren.

Gruß Gernot

[Struppi]

Oder hat noch jemand andere Ideen, über welche Werte man das dort abfragen könnte? Da je nach Browser-Theme die Scrollbakenbreite bei mozillaartigen ja sehr schwankt (bei Opera nicht), wäre es gerade für jene Browser wichtig im Zusammenhang mit meinem Projekt:

Ich kann dir nur noch empfehlen in der deutschsprachigen JS newsgroup mal nachzufragen. (de.comp.lang.javascript), da sind einige Experten, die dir die Fragen vermutlich eher beantworten können.

Struppi.

[Detlef G.]

Hallo Gernot,

wozu genau musst du unbedingt die genaue Scrollbalkenbreite wissen?

Auf Wiederlesen
Detlef

[Gernot Back]

Hallo Detlef

Ich will ja bei meinem Projekt

http://www.sprachlernspiele.de/anzeige/tabelle.html

Mit zwei kleinen Frames, die eigentlich nur aus einer Hintergrundfarbe für den Body bestehen, eine Verlängerung der Scrollbalken imitieren. Bei hohen Auflösungen kann es da auch sein, dass die Tabelle (es soll ja nicht immer nur diese sein) auch mal ganz auf dem Bildschirm darstellbar ist. Dann müssten diese Frames ggf. ganz entfallen bzw mit setAttribute() auf eine Breite oder Höhe von 0 gesetzt werden. Außerdem wär es halt auch bei Scrollbalken ganz nett, wenn deren Frame-Imitation in der Breite immer genau der jeweiligen Scrollbalkenbreite des Browsers entspräche.

Ich schreibe gerade an einem Feature-Artikel zum Thema "Dynamische Framesets" für SelfHTML, deshalb bin ich so pingelig und will es so allgemeingültig wie möglich haben.

Gruß Gernot

[Detlef G.]

Hallo Gernot,

und wozu brauchst du dabei die Breite der Scrollbalken?
Reicht dir dazu nicht die Höhe des Anzeigebereiches?
Hast du einmal getestet, ob sich diese eindeutig ermitteln lässt?
Könntest du den Blindframes nicht einfach den Rest des Fensters geben?

Andere Frage:
Müssen die Blindframes unbedingt sein?
OK, wenn es zuverlässig funktioniert, sieht es besser aus.
Wenn es aber nur mit Verrenkungen feststellbar ist?
Wenn die Blindframes nicht präzise den Scrollbalkenbreiten entsprechen, sieht es aus, wie gewollt und nicht gekonnt. Dann fände ich es besser, wenn die Tabelle einfach weitergeht.

Auf Wiederlesen
Detlef

[Gernot Back]

Hallo Detlef

Könntest du den Blindframes nicht einfach den Rest des Fensters geben?

Nein den * weise ich ja schon dem Hauptanzeigebereich zu. Meinst du das? Ich weiß nicht, ob ich dich richtig verstehe.

Müssen die Blindframes unbedingt sein?

Ja, denn wenn man sonst ganz nach rechts oder unten scrollt, stimmt es nicht mehr überein und sieht auch beschissen aus, außer wenn ich nicht nur mit dem onscroll-Event arbeite, sondern zusätzlich zum Abgleich zwischen den pageXOffsets und pageYOffsets der einzelnen Frames mit einem Intervall. Das muss ich mit Mozilla&Co zwar ohnehin tun, weil der einen Bug beim onscroll-Event bei Maus(rad) und Tastatur-Scrollen hat, das würde ich dem Rechner aber bei den anderen Browsern gerne ersparen.

vgl.: http://bugzilla.mozilla.org/show_bug.cgi?id=189308

OK, wenn es zuverlässig funktioniert, sieht es besser aus.

Wenn die Blindframes nicht präzise den Scrollbalkenbreiten entsprechen, sieht es aus, wie gewollt und nicht gekonnt. Dann fände ich es besser, wenn die Tabelle einfach weitergeht.

Und dann verlierst du beim Scrollen die Überschriften links und oben aus dem Blickfeld und weißt, wenn du nicht die "Touchscreen-Methode" benutzt nicht mehr, worum es eigentlich geht, das ist es ja gerade, wofür ich eine Lösung finden will.

Gruß Gernot

Übrigens:

Wissen ist gut, Können ist besser, aber das Beste und Interessanteste ist der Weg dahin!

Der Spruch ist gut, den mache ich mir auch zu eigen!

[Detlef G.]

Hallo Gernot,

irgendwie reden (bzw. schreiben) wir aneinander vorbei

Nein den * weise ich ja schon dem Hauptanzeigebereich zu. Meinst du das? Ich weiß nicht, ob ich dich richtig verstehe.

Natürlich soll der Hauptanzeigebereich den * bekommen. Mir geht es um das linke und das obere Frameset.
Die linke Spalte sieht z.B. so aus:

<frameset  rows="45,*,13">

Jetzt willst du die 13 durch die errechnete Scrollbalkenbreite ersetzen.
Mein Gedanke war, ob es nicht eventuell zuverlässiger ist, die innere Anzeigehöhe des Hauptanzeigebereiches zu bestimmen.
Wenn ich mich nicht vermessen habe, gibt "document.body.clientHeight" diese präzise zurück (zumindest in meinem Mozilla). Dann könnte das linke mittlere Frame statt * die entsprechende Höhe bekommen und das linke untere (Blind)Frame den Rest.

Entsprechend mit dem oberen mittleren Frame und dem oberen rechten (Blind)Frame.

Ob überhaupt, und wenn, wie genau, das umzusetzen geht, kann ich im Moment nicht sagen, dazu habe ich mich nicht weit genug in die Sache vertieft (OK ich bin auch nicht der Javascript-Profi).
Ich denke aber, das es lohnen könnte, das Srollbalkenproblem genau andersherum anzugehen (ein bisschen Querdenken).

Müssen die Blindframes unbedingt sein?

Ja, denn wenn man sonst ganz nach rechts oder unten scrollt, stimmt es nicht mehr überein und sieht auch beschissen aus, ...

Ja, ganz am Ende.
Dann müsste dafür gesorgt werden, dass die linke Spalte etwas länger und die obere Zeile etwas breiter ist als der Hauptbereich.

... Das muss ich mit Mozilla&Co zwar ohnehin tun, weil der einen Bug beim onscroll-Event bei Maus(rad) und Tastatur-Scrollen hat, ...

Wie ich feststellen konnte, hast du dies ja ganz gut gepackt. Es gibt nur noch eine ganz kleine Verzögerung, bis es übereinstimmt.
(Übrigens, afaik wird beim Mausrad-Scrollen nur Tastatur-Scrollen generiert.)

... Dann fände ich es besser, wenn die Tabelle einfach weitergeht.

Und dann verlierst du beim Scrollen die Überschriften links und oben aus dem Blickfeld und weißt, ...

Ich meinte nur oben rechts und unten links, dort wo jetzt die Blindframes sind.

Übrigens:

...
Der Spruch ist gut, den mache ich mir auch zu eigen!

http://forum.de.selfhtml.org/archiv/2003/12/66985/#m383511

Auf Wiederlesen
Detlef

[Gernot Back]

Hallo Detlef,

gute Anregungen! Da habe ich ja im Laufe des Tages wieder ein volles Programm, und das bei dem schönen Wetter! Im Moment ist es schon zu spät oder noch zu früh mich da hinein zu versetzen, aber das klingt interessant.

Gruß Gernot

[Gernot Back]

Hallo Detlef,

dein Tipp war super. Ich habe mir jetz mal per alert die Werte für document.body.clientHeight und ~Width in jedem einzelnen Frame ausgeben lassen.

http://www.sprachlernspiele.de/anzeige/tabelle.html

Dabei ergeben sich bei den jetzigen Frameset-Einstellungen nur bei den "mozilloiden" Browsern Abweichungen zwischen den einzelnen Frames, die gleich breit bzw gleich hoch sein sollen, und zwar auch dort nur dann, wenn sie nicht im Classic-Theme betrieben werden. Ich denke ich kann jetzt eine Funktion schreiben, die diese Abweichung im Frameset z.B. mit
document.getElementsByTagName('frameset')[x].setAttribute('cols','bestehenderWert,korrigierterWert,*','false')
korrigiert. Das würde wahrscheinlich auch in den anderen Browsern für den Fall wirken, dass die Ergänzungsframes gar nicht nötig sind, weil die Bildschirmauflösung hoch genug ist, um die Tabelle komplett darzustellen. Die Programmierung vertage ich aber auf einen weniger heißen Sommertag, von der Erklärung der komplizierten Korrektur-Funktion im Artikel einmal ganz zu schweigen.

Danke

Gruß Gernot