Scrollbalken, position

[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