at: column-count: auto; und scroll-snap-*

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. Wie kann ich scroll-snap-* so darauf anwenden, dass jede der automatisch erzeugten Spalten beim horizontalen Scrollen einrastet? Beziehungsweise wie kann ich die Wirkung von scroll-snap-* für diesen Zweck simulieren? Vielleicht kennt ihr funktionierende Beispiele, die ich nicht gefunden habe.

MfG, at

  1. 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ß.

    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

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. Hallo Matthias,

      vielen Dank für deine Antwort!

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

      Ja.

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

      Nein, aber das ist nicht maßgeblich. Also meinetwegen auch ja, wenn es der Lösungsfindung dient.

      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ß.

      Yep! Ich habe auch schon an Shadow DOM gedacht, aber man gönnt mir ja noch nicht einmal die berechnete Anzahl der Spalten.

      Was dort steht, kenne ich und das funktioniert ja auch. Allerdings habe ich noch einen Hinweis zu column-span hinzugefügt.

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

      Evtl mal mit scroll-snap-type proximity experimentieren.

      proximity hilft leider auch nicht. Ohne Wert für scroll-snap-align kann man ohne Zwischenstop durchscrollen, mit Wert kann man man praktisch gar nicht scrollen.

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

      Ich auch nicht, zumindest nicht gern, die Aufteilung in Spalten funktioniert ja.

      MfG, at

    2. @@Matthias Scharwies

      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.

      Hold my beer.

      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.

      Nicht?

      😷 LLAP

      --
      “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
      1. Servus!

        @@Matthias Scharwies

        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.

        Hold my beer.

        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.

        Nicht?

        Genial! Ich hätte nicht gedacht, dass die Browser untereinander stehende Scroll-Elemente zu einer Fangposition zusammenfassen, bzw, dann zur nächsten gehen. Cool!

        Herzliche Grüße

        Matthias Scharwies

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
  2. @@at

    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. Wie kann ich scroll-snap-* so darauf anwenden, dass jede der automatisch erzeugten Spalten beim horizontalen Scrollen einrastet?

    Über #6017 und #5911 bin ich auf dieses Beispiel gestoßen.

    ☞ Auf dein Probem angewandt.

    Der Trick ist wohl, scroll-snap-align auf Kindelemente des Containers anzuwenden – in meinen Beispiel auf section.

    😷 LLAP

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    1. @@Gunnar Bittersmann

      ☞ Auf dein Probem angewandt.

      Noch ergänzt: In Chromia braucht der Container noch tabindex="0", damit man den Tastaturfokus darauf setzen und mit Pfeiltasten scrollen kann.

      Der Trick ist wohl, scroll-snap-align auf Kindelemente des Containers anzuwenden – in meinen Beispiel auf section.

      Und damit kann man im Firefox mit [→] zwar vorwärts scrollen, mit [←] aber nicht mehr zurück. Vermutlich ein Bug.

      😷 LLAP

      --
      “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
      1. Lieber Gunnar,

        Und damit kann man im Firefox mit [→] zwar vorwärts scrollen, mit [←] aber nicht mehr zurück. Vermutlich ein Bug.

        also bei mir hat das Vor und Zurück mit den Pfeiltasten funktioniert.

        Liebe Grüße

        Felix Riesterer

        1. @@Felix Riesterer

          Und damit kann man im Firefox mit [→] zwar vorwärts scrollen, mit [←] aber nicht mehr zurück. Vermutlich ein Bug.

          also bei mir hat das Vor und Zurück mit den Pfeiltasten funktioniert.

          Hm, Windows? Oder Linux?

          Auf dem Mac geht’s bei mir nicht. Mal die VM mit Windows anschmeißen …

          😷 LLAP

          --
          “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
          1. Servus!

            @@Felix Riesterer

            Und damit kann man im Firefox mit [→] zwar vorwärts scrollen, mit [←] aber nicht mehr zurück. Vermutlich ein Bug.

            also bei mir hat das Vor und Zurück mit den Pfeiltasten funktioniert.

            Hm, Windows? Oder Linux?

            Auf dem Mac geht’s bei mir nicht. Mal die VM mit Windows anschmeißen …

            Auf Win 10, FF89 geht's auch nicht!

            Herzliche Grüße

            Matthias Scharwies

            --
            Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
            1. @@Matthias Scharwies

              Auf Win 10, FF89 geht's auch nicht!

              Ja, konnte ich auf einer Windows-Kiste nachvollziehen. Hab das mal eingetütet.

              😷 LLAP

              PS: Beim letzten Mal ging der Bugfix ziemlich flott.

              --
              “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
              1. Servus!

                @@Matthias Scharwies

                Auf Win 10, FF89 geht's auch nicht!

                Ja, konnte ich auf einer Windows-Kiste nachvollziehen. Hab das mal eingetütet.

                Danke!

                PS: Beim letzten Mal ging der Bugfix ziemlich flott.

                Hoffentlich!

                Herzliche Grüße

                Matthias Scharwies

                --
                Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
          2. Lieber Gunnar,

            Hm, Windows? Oder Linux?

            zweiteres (natürlich): Linux Mint mit FF89.0

            Liebe Grüße

            Felix Riesterer

    2. Servus!

      ☞ Auf dein Probem angewandt.

      Ich hab's mal ins Wiki übertragen:

      CSS/Tutorials/Typografie/Spalten#Exkurs:_Scroll_Snap_bei_columns

      Herzliche Grüße und vielen Dank!

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    3. Hallo Gunnar!

      Über #6017 und #5911 bin ich auf dieses Beispiel gestoßen.

      ☞ Auf dein Probem angewandt.

      Der Trick ist wohl, scroll-snap-align auf Kindelemente des Containers anzuwenden – in meinen Beispiel auf section.

      Vielen Dank! Das ist zumindest ein erster wichtiger Teil des Tricks.

      Ein zweiter behebt das Problem, das entsteht, wenn nicht in jeder Spalte ein neues Kindelement beginnt. In deinem Beispiel sind Teile von Artikel 25 ff. ja nicht lesbar, wenn die Breite des Viewports nur für eine Spalte reicht und die Höhe weniger als acht Zeilen beträgt. Längere Absätze würde das Problem verstärken.

      Deshalb habe ich <section> zusätzlich scroll-snap-type: x mandatory; mitgegeben und wahllos leere <span>-Elemente eingestreut und folgendermaßen formatiert:

      span {
      	display: block;
      	float: right;
      	position: relative;
      	left: 3em;
      	width: 0;
      	height: 0;
      	scroll-snap-align: start;
      }
      

      Die <span>-Elemente kann ich per Javascript einbauen. Allerdings muss ich noch testen, ob das CSS in allen gängigen Browser funktioniert.

      MfG, at

  3. @@at

    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.

    Problem dabei: Die Spaltenbreite wird so berechnet, dass eine ganzzahlige Anzahl von Spalten ins Containerelement passt. Das mag zwar chic aussehen, auf Systemen, die – solange man nicht scollt – keine Scrollbar zeigen (macOS, iOS, Android?), haben Nutzer aber keinen visuellen Hinweis darauf, dass da rechts noch mehr Inhalt ist, zu dem man horizontal scrollen kann.

    Besser wäre es, wenn rechts eine Spalte angeschnitten wäre oder man irgeneinenanderen Hinweis (Pfeil?) bekäme.

    😷 LLAP

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    1. Hallo Gunnar!

      Problem dabei: Die Spaltenbreite wird so berechnet, dass eine ganzzahlige Anzahl von Spalten ins Containerelement passt. Das mag zwar chic aussehen, auf Systemen, die – solange man nicht scollt – keine Scrollbar zeigen (macOS, iOS, Android?), haben Nutzer aber keinen visuellen Hinweis darauf, dass da rechts noch mehr Inhalt ist, zu dem man horizontal scrollen kann.

      Dessen bin ich mir bewusst, dieses Problem hängt ja an Flexbox.

      Besser wäre es, wenn rechts eine Spalte angeschnitten wäre oder man irgeneinenanderen Hinweis (Pfeil?) bekäme.

      Das hatte ich bereits berücksichtigt und wollte mittels passender Größenangaben und overflow-x: scroll; die nachfolgende Spalte anteasern. Das hat bereits vorher funktioniert, trotzdem vielen Dank für den Hinweis!

      MfG, at