Scrollbar des Browsers in die ziehen

[hmm]

Hi Leute,

ich möchte das die Scrollbar des Browsers in die Mitte gesetzt wird, wenn meine HTML Seite geladen wird.

Wie kann ich das mit HTML, CSS und JavaScript realisieren? Geht das mit Dom irgendwie?

[Matthias Apsel]

Hallo hmm,

ich möchte das die Scrollbar des Browsers in die Mitte gesetzt wird, wenn meine HTML Seite geladen wird.

Wie kann ich das mit HTML, CSS und JavaScript realisieren? Geht das mit Dom irgendwie?

Ja. Absolute/fixierte Positionierung in Verbindung mit der overflow-Eigenschaft. Ich würde es lassen.

Bis demnächst
Matthias

[hmm]

Ich habe in meinem Java Programm einen internen Browser (ich benutze javaFX dafür), in diesem internen Browser hab ich eine html Seite eingebaut die per JavaScript D3 eine hübsche Visualisierung baut. Jetzt möchte ich, dass beim aufrufen der html-Seite die Scollbar defaultmäßig in der Mitte steht und der Anwender auf die Mitte der html Datei guckt.

[Robert B.]

Moin,

wie und wo soll die Scrollbar in die Mitte? Soll die mittig über den Viewport laufen? Oder möchtest du einen Punkt anspringen, der mittig in y-Richtung liegt?

Viele Grüße
Robert

[hmm]

ich habe ein SVG auf meiner HTML Seite das bereits in der Mitte liegt, dieses SVG füllt 200% der Bildschirmgröße aus. Ich möchte das der Bildschirm auf die Mitte guckt, wenn die Seite gestartet wurde.

[Orlok]

ich habe ein SVG auf meiner HTML Seite das bereits in der Mitte liegt, dieses SVG füllt 200% der Bildschirmgröße aus. Ich möchte das der Bildschirm auf die Mitte guckt, wenn die Seite gestartet wurde.

Über die Eigenschaften clientWidth und clientHeight kannst du die Abmessungen eines Elementes in Pixeln ermitteln, also zum Beispiel von Body. Die Eigenschaften innerWidth und innerHeight von Window geben Auskunft über die Abmessungen des Viewports, und mit der Methode scrollTo(x, y) des Objektes window kannst du an eine bestimmte Position scrollen.

[hmm]

hm, window.scrollTo( 0, 1000 ); scheint garnichts zu bewirken. ich find auch kein beispiel. wie benutzt man das?

[hmm]

window.scrollBy(0, 100); funktioniert!

jetzt muss ich noch herausfinden wieviele px 50% meiner seite sind

[hmm]

ok, funktioniert. danke!

fusioncharts.render();
var h = document.body.clientHeight;
window.scrollBy(0, h/2);

[Orlok]

ok, funktioniert. danke!

Gern geschehen. Aber ein Schritt fehlt noch, um den Viewport wie gewünscht zu zentrieren.

Die als Argumente an scrollTo oder scrollBy übergebenen Koordinaten beziehen sich auf die linke obere Ecke des Viewports. Das heißt, wenn du wie in deinem Beispiel einfach body.clientHeight durch Zwei teilst, dann ist nur der Bereich unterhalb des Äquators zu sehen.

   ________________________
  |                        |
  |                        |
  |          Body          |
  |                        |
  |                        |
  |                        |
 ||‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾||
 ||                        ||
 ||        Viewport        ||
 ||        ‾‾‾‾‾‾‾‾        ||
 ||                        ||
 ||________________________||


window.scrollTo(0, document.body.clientHeight / 2);

Aus diesem Grund hatte ich dich auch auf window.innerWidth und window.innerHeight aufmerksam gemacht, welche die Abmessungen des Viewports enthalten. Nimm von diesem Wert die Hälfte und ziehe es von dem ab, was du berechnet hast, um den Viewport im Zentrum zu positionieren.

   ________________________
  |                        |
  |          Body          |
  |________________________|
 ||                        ||
 ||                        ||
 ||        Viewport        ||
 ||        ‾‾‾‾‾‾‾‾        ||
 ||                        ||
 ||________________________||
  |                        |
  |          Body          |
  |________________________|


window.scrollTo(0, document.body.clientHeight / 2 - window.innerHeight / 2);

Im Übrigen würde ich empfehlen, statt scrollBy die Methode scrollTo zu verwenden. In deinem Fall funktionieren zwar beide Varianten, da du die Funktion direkt nach dem Laden der Seite auszuführen gedenkst, aber ich sehe keinen Grund, warum man den Erfolg der Operation davon abhängig machen sollte, dass die Seite zum Zeitpunkt der Ausführung nicht gescrollt ist.

Die an scrollTo übergebenen Werte beziehen sich auf den Ursprung des Koordinatensystems, die an scrollBy übergebenen Werte hingegen auf die Position des Viewports zum Zeitpunkt des Aufrufs.

[hmm]

danke, leider kann ich den viewport nicht passend setzen weil ich die mitte meines SVG zentrieren möchte und das SVG 150% der Seite einnimt.

[Rolf b]

Hast Du Dir sowas vorgestellt?

Die CSS Gurus hier kriegen es vielleicht auch ohne JavaScript hin - keine Ahnung.

Rolf

[hmm]

du meinst die zweite scollbar?

ne, ich möchte die scrollbar die mir mein browser automatisch macht auf die mitte setzen.

[Rolf b]

Zweite Scrollbar? Wenn der Darstellungsbereich des Fiddle groß genug ist, gibt's nur eine.

Der Browser setzt den Scrollbalken IMMER an den rechten Rand eines scrollenden Containers, deswegen das Dummy-Element, das so positioniert ist, dass der Scrollbar in der Mitte erscheint, und dessen Scrollposition mit dem Rahmen um den eigentlichen Content synchronisiert ist.

Rolf

[Gunnar Bittersmann]

@@Rolf b

Der Browser setzt den Scrollbalken IMMER an den rechten Rand eines scrollenden Containers

Nein, nicht immer. Beispiel

Das sollte er jedenfalls nicht tun. Chrome und Firefox tun’s auf macOS trotzdem; Safari setzt die Scrollbar richtigerweise an den linken Rand.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Das sollte er jedenfalls nicht tun. Chrome und Firefox tun’s auf macOS trotzdem; Safari setzt die Scrollbar richtigerweise an den linken Rand.

Naja, ob richtigerweise, darüber lässt sich streiten. Ich bin der Meinung, die Scrollbar sollte immer an derselben Seite sein, egal in welcher Sprache ich eine Internetseite betrachte. Araber werden sie immer an der linken Seite suchen, auch wenn sie häufig Seiten in englischer Sprache lesen werden.

Im Firefox lässt sich das Verhalten mit layout.scrollbar.side steuern.

Bis demnächst
Matthias

[hmm]

danke für die Antworten.

Ich habe ein SVG auf der Seite, dass wiederum eine eigene Scrollbar haben darf.

dem SVG fehlen leider einige Linien die ich nicht im SVG Generator setzen kann, da bin ich gerade am Überlege ich die diese Linien über das SVG drüberbügeln kann oder wie ich das alternativ mache.