Fester Block und scrollbarer Block

[Siegfried]

Moin,

in dem Beispiel möchte ich, dass bei schmalen Fenstern der Block "fest" immer sichtbar bleibt, wenn man horizontal scrollt. Den Inhalt in "scroll" (im Beispiel Text, kann aber auch ein breites Bild oder eine Tabelle sein) soll man aber horizontal scrollen können. Mit dem gefundenen sticky klappt es leider nicht.

Schöne Grüße

Siegfried

[Rolf B]

Hallo Siegfried,

Dein Beispiel hat keinen Block "fest" oder "scroll". Da ist auch kein sticky.

Falscher Link?

Rolf

[Siegfried]

Hallo Rolf,

Dein Beispiel hat keinen Block "fest" oder "scroll". Da ist auch kein sticky.

Sorry, das sticky hatte ich herausgenommen, da es nicht funktioniert hatte. Was ich mit fest und scroll meinte, ist dass der p-Bereich mit Text2 ggf. horizontal scrollbar sein soll und der p-Bereich mit Text1 nicht mitgescrollt wird.

Gruß Siegfried

[Rolf B]

Hallo Siegfried,

versuch doch mal

p.lang {
  white-space: nowrap;

  overflow-x: auto;
}

Der Standardwert für overflow ist visible, damit hängt der Inhalt einfach über die p-Box hinaus und erzeugt den Scrollbar auf dem Body. Mit overflow-x:auto wird ein Scrollbar für das p Element aktiviert, sobald der Inhalt zu breit wird.

Der Scrollbar ist dann allerdings direkt am p Element und nicht unten am Body.

position:sticky bekomme ich ebenfalls nicht hin. Sollte EIGENTLICH zusammen mit left:0 funktionieren, wird aber ignoriert. Das muss ich noch ergründen.

Rolf

[Siegfried]

Hallo Rolf, ich freue mich auf das Ergebnis Deiner Erkundung. Ich war fast am Ende, nachdem die beschriebene Funktion von sticky nicht funktionierte!

[Rolf B]

Hallo Siegfried,

es ist so, dass ein sticky-Element nur so lange kleben bleibt, bis sich die Seiten von sticky und Scrollcontainer auf der Seite, die der Klebeseite gegenüber liegt, berühren.

In deinem Fall ist es so, dass Du zwar ein breites Element drin hast, das macht aber den Body nicht so breit wie sein Inhalt ist. Der Body ist nach wie vor so breit wie das Fenster. Das p.lang ist ebenfalls nicht breiter. Trotzdem siehst Du einen Scrollbar und kannst die Seite scrollen, aber du scrollst nicht den Inhalt des body, sondern das Root-Element (html), d.h. du scrollst den gesamten Scrollcontainer und das hebelt sticky aus.

Damit ist das gewünschte sticky-Element so breit wie der Body, d.h. die gegenüberliegenden Seiten berühren sich von Anfang an und sobald Du den body scrollst, ist die Stickyness vorbei.

So ganz ist mir das aber auch nicht einsichtig. Hier spielen mehrere potenzielle Scrollcontainer zusammen, und hinzu kommt die Eigenschaft von Blockelementen, so breit zu werden wie ihr Elternelement, sowie die Eigenschaft des Body, so breit zu werden wie das Fenster. Es mit sticky sauber hinzubekommen, ist mir zwar gelungen, aber nur durch massiven Einsatz von width-Angaben. Sobald die Seite umfangreicher wird, dürfte das ins Chaos abdriften.

Mein Vorschlag, nur das p.lang Element mit einem horizontalen Scrollbar zu versehen, ist da deutlich einfacher und vor allem robuster.

Rolf

[Siegfried]

Hallo Rolf u.a., nach dem Urlaub bin ich jetzt wieder aktiv und habe folgendes Problem.

In dem Beispiel kann der zweite Text horizontal gescrollt werden und text1 und text3 bleiben fest.

Wenn ich den text2 ersetze durch eine Tabelle, dann wird nicht nur die Tabelle sondern die ganze Seite gescrollt. Woran liegt dies?

[MudGuard]

Hi,

In dem Beispiel kann der zweite Text horizontal gescrollt werden und text1 und text3 bleiben fest.

Wenn ich den text2 ersetze durch eine Tabelle, dann wird nicht nur die Tabelle sondern die ganze Seite gescrollt. Woran liegt dies?

daran, daß Absätze keine Tabellen enthalten dürfen - darum macht der Browser den Absatz vor der Tabelle zu.

cu,
Andreas a/k/a MudGuard

[Siegfried]

daran, daß Absätze keine Tabellen enthalten dürfen - darum macht der Browser den Absatz vor der Tabelle zu.

meinst Du den p-Block? Den habe ich entfernt und der Tabelle das Attribut 'scrollbar' gegeben. und es klappt trotzdem nicht.

[MudGuard]

Hi,

daran, daß Absätze keine Tabellen enthalten dürfen - darum macht der Browser den Absatz vor der Tabelle zu.

meinst Du den p-Block? Den habe ich entfernt und der Tabelle das Attribut 'scrollbar' gegeben. und es klappt trotzdem nicht.

Tabellen und Scrollbars ...

leg ein div um die Tabelle, und gib der den Scrollbar ...

cu,
Andreas a/k/a MudGuard

[Siegfried]

Danke, wie einfach, wenn man es weiß! Die Geheimnisse von CSS und HTML werden mir wohl ewig verborgen bleiben!

[Siegfried]

Hallo Andreas, wie bekomme ich die horizontale scrollbar an das untere Ende des Viewports? Wenn die Tabelle sehr viele Zeilen hat muss man ja bis nach unten scrollen. Ich habe schon einmal eine solche Frage (im Forum?) gelesen, weiß aber nicht mehr wo.