Scroll Snap und columns-Layout

[Matthias Scharwies]

Servus!

Hallo zusammen,

vielleicht fällt euch etwas zu folgender Problemstellung ein:

Ein Inhalt variabler Länge wird im CSS mittels fester column-width und column-count: auto; in eine variable Anzahl von nebeneinander liegenden, gleich großen Spalten aufgeteilt.

Du hast einen Abschnitt mit anscheinend fester Höhe, aber variabler Breite, der bei breiterem Viewport mehr Spalten bildet?

Bei kleinerem Viewport würden weniger Spalten gebildet und der Inhalt würde sich nach unten verteilen.

Das Grundproblem hier ist, dass sich der Abschnitt zwar darstellungsmäßig in columns teilt, dies aber im DOM nicht sichtbar ist. Sowohl der Firefox als auch Chrome zeigen zwar Grid und Flex, aber eben keine Möglichkeit, die n-te Spalte von irgendetwas zu selektieren. Jedenfalls soweit ich weiß.

• CSS/Tutorials/Typografie/Spalten

Wie kann ich scroll-snap-* so darauf anwenden, dass jede der automatisch erzeugten Spalten beim horizontalen Scrollen einrastet?

So wie ich das verstanden habe gar nicht.

Du setzt ja scroll-snap-type für den Scroll-Container, während scroll-snap-align für die Scroll-Elemente genutzt wird. Du hast aber keine Elemente.

Beziehungsweise wie kann ich die Wirkung von scroll-snap-* für diesen Zweck simulieren?

Evtl mal mit scroll-snap-type proximity experimentieren. Die Nutzer sollen scrollen, wenn Spalten aus dem Viewport geraten, aber (noch) nicht bis zum nächsten Fangpunkt springen.

Den Inhalt mit getBoundingClientRect auszumessen und dann auf dynamisch erzeugte Spalten (<x-column>) zu verteilen, würde ich nicht machen.

Herzliche Grüße

Matthias Scharwies