Scrollbalken, position

[derkps]

Hallo,

der Scrollbalken startet immer oben und kann dann nach unten verschoben werden.

.scollen {
  height: 400px;
  overflow-y: scroll;
}

Wie erreiche ich, dass er in der Mitte startet und dann nach oben/unten verschoben werden kann?

vG derkps

[Gunnar Bittersmann]

@@derkps

Wie erreiche ich, dass er in der Mitte startet und dann nach oben/unten verschoben werden kann?

Was soll die Mitte sein? Die Mitte der Seitenhöhe? Dann kannst du per JavaScript dorthin scrollen:

window.scrollTo({
	top: (document.documentElement.offsetHeight - window.innerHeight)/2,
});

Oder ein bestimmtes Element, das sich in der Mitte der Seite befindet und eine ID (bspw. id="middle") hat?

Dann kommst du per location.hash = 'middle'; dorthin. Oder ohne JavaScript, wenn du gleich dorthin verlinkst: https://example.net/path#middle.

☞ Beispiel

Kwakoni Yiquan

[MudGuard]

Hi,

Wie erreiche ich, dass er in der Mitte startet und dann nach oben/unten verschoben werden kann?

Was soll die Mitte sein? Die Mitte der Seitenhöhe? Dann kannst du per JavaScript dorthin scrollen:

Aufgrund der Tatsache, daß derkps eine Klasse verwendet, vermute ich, daß er mehrere scrollbare Bereiche auf seiner Seite haben will - und da soll sich vermutlich die Mitte des jeweiligen Inhalts im sichtbaren Bereich befinden.

cu,
Andreas a/k/a MudGuard

[derkps]

Hallo, ich habe mein Anliegen nicht gut formuliert, sorry! Hier ein Link http://test.derkps.de/

Es gibt einen Beitrag mit <iframe> und einem über großen Bild. Das ist gesetzt!

<div class="scroll"><iframe src="/images/stories/eslohe.jpg" width="3000px" height="925px"></iframe></div>

Die Klasse "scroll" setzt Scroll-Bars

.scroll {
    height: 300px;
    overflow-y: scroll;
    width: 1000px;
    overflow-x: scroll;
    }

Gewünscht ist, dass der Scroll-Bar in der Mitte steht und nicht in der Ecke.

Ich arbeite mit Joomla, in css scheint es nichts zu geben und im Browser kann ich den scroll-container nicht identifizieren.

vG

[MudGuard]

Hi,

Es gibt einen Beitrag mit <iframe> und einem über großen Bild. Das ist gesetzt!

<div class="scroll"><iframe src="/images/stories/eslohe.jpg" width="3000px" height="925px"></iframe></div>

Du packst also ein Element, das an sich schon Scrollbalken anbietet, in ein weiteres Element, um dort Scrollbalken anzubieten?

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo derkps,

Es gibt einen Beitrag mit <iframe> und einem über großen Bild. Das ist gesetzt!

Magst Du uns erläutern, warum das gesetzt ist? Nur damit wir ausschließen können, in die XY-Problem-Falle getappt zu sein.

Denn für das Beispiel ist der iframe überhaupt nicht nötig. Der ist genau so groß wie das Bild, d.h. man könnte das Bild auch direkt in den Scrollcontainer setzen. Rechtfertigung für den iframe kann sein, dass statt des Bildes ein HTML Dokument gezeigt werden soll - aber dann hast Du ganz andere Probleme, weil die Höhe dieses Dokuments nicht a priori bestimmbar ist.

Aber nehmen wir mal an, es ginge nicht anders.

in css scheint es nichts zu geben

Wenn der Scoll-Container nur dazu da ist, den mittleren Ausschnitt herauszufinden und nicht, um nachher auch zu scrollen, gäbe es schon Möglichkeiten (transforms oder margin). Wenn Du wirklich scrollen können willst und eine anfängliche Scrollposition setzen musst, dann brauchst Du JavaScript.

und im Browser kann ich den scroll-container nicht identifizieren.

Nimm querySelector. Wenn Du nicht weißt, was CSS Kombinatoren sind, folge dem Link in unser Wiki.

Wichtig: Der iframe braucht noch ein display:block ODER ein vertical-align:bottom, andernfalls lässt der Browser darunter ein paar Pixel für Unterlängen frei. Das äußert sich bei mir darin, dass die scrollHeight des div.scroll 931px beträgt und nicht die 925px des iframe.

Wenn das gefixt ist, kann man die Scrollposition auf diese Weise setzen (was Gunnar eigentlich schon geschrieben hatte):

const scrollFrame = document.querySelector(".com-content-article__body .scroll");
const y_excess = scrollFrame.scrollHeight - scrollFrame.clientHeight;
const x_excess = scrollFrame.scrollWidth - scrollFrame.clientWidth;
scrollFrame.scrollTo(x_excess/2, y_excess/2);

querySelector(".com-content-article__body .scroll") sucht ein Element mit der Klasse com-content-article__body und darin ein Element mit der Klasse scroll.

scrollWidth/scrollHeight ist die Größe des gescrollten Inhalts, also des iframes. clientWidth/clientHeight ist die Größe des sichtbaren Bereichs, also die Größe von div.scroll minus die Scrollbalken. Damit ist y_excess und x_excess der Größenüberschuss des Inhaltes. Teilt man den durch 2, weiß man, wieviel vom Größenüberschuss an jede Seite muss, und das kann man als Scrollposition verwenden. scrollTo() kann man in 2 Varianten aufrufen. Entweder mit einem Objekt als Argument wie bei Gunnar - dann kann man auch sanft scrollen, oder einfach mit den Koordinaten für linke obere Ecke des gewünschten Ausschnitts.

Wenn Du nur vertikal zentrieren willst, brauchst Du x_excess nicht und kannst scrollTo dort eine 0 übergeben. Aber wenn doch, weißt Du jetzt, wie man auch horizontal in die Mitte scrollt.

Rolf