Pure CSS Horizontal Scrolling

Das Web ist ein ziemlich vertikaler Ort. Sie lesen eine Website so, wie Sie eine physische Seite lesen: von links nach rechts, von oben nach unten. Aber manchmal möchten Sie sich von der Vertikalität lösen und etwas Verrücktes tun: eine horizontale Liste erstellen. Oder noch verrückter, eine horizontale Website!

Es wäre schön, wenn wir so etwas tun könnten

/* This isn't real */
div {
  scroll-direction: horizontal;
}

Leider wird das nicht passieren. Es steht noch nicht einmal auf der Roadmap für CSS.

Das ist schade, denn in dem Unternehmen, für das ich arbeite, wäre das ziemlich nützlich. Wir machen ziemlich viele Web-Präsentationen. Präsentationen sind eine sehr horizontale Sache – normalerweise haben Folien ein Seitenverhältnis von 4:3 oder 16:9. Das bedeutet, wir haben immer einen Kampf zwischen der Horizontalität von Präsentationen und der Vertikalität von Webtechnologien. Und mit "wir" meine ich mich. Aber wenn es eines gibt, das ich mag, dann ist es eine Herausforderung.

Ein weiterer Anwendungsfall

Der spezifische Anwendungsfall, der mich zu dieser Idee führte, war, dass ein Kunde alle seine Produkte auf einer einzigen Folie zeigen wollte. Natürlich war der Produktkatalog viel zu groß, um ihn in einer einzigen Ansicht unterzubringen. Also beschlossen wir, sie in drei Kategorien aufzuteilen, die jeweils horizontal scrollbar waren. So waren die drei prominentesten Produkte jeder Kategorie sichtbar und weniger wichtige Produkte waren immer noch leicht zugänglich.

Eine Methode ohne JavaScript

Es gibt, keine Überraschung, zahlreiche Möglichkeiten, dies in JavaScript zu tun. Einige davon finden Sie auf dieser Website.

Ich war neugierig, ob es in reinem CSS möglich war. Die Lösung war schließlich ziemlich einfach

• Erstellen Sie einen Container mit Elementen
• Drehen Sie den Container um 90 Grad gegen den Uhrzeigersinn, sodass die _Unterseite_ nach _rechts_ zeigt
• Drehen Sie die Elemente wieder aufrecht

Schritt 1) Container einrichten

Erstellen Sie ein <div> und fügen Sie eine Reihe von Kindelementen hinzu.

In diesem Beispiel ist unser horizontal scrollender Container 300 Pixel breit, mit 8 Elementen von jeweils 100×100 Pixel. Dies sind willkürliche Größen; sie könnten alles sein.

<div class="horizontal-scroll-wrapper squares">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>

Die Höhe des Containers wird zur „Breite“ und umgekehrt. Also wird unten die „Breite“ unseres Containers 300 Pixel betragen

.horizontal-scroll-wrapper {
  width: 100px;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

Nun die Kinder

.horizontal-scroll-wrapper > div {
  width: 100px;
  height: 100px;
}

Schritt 2) Den Container drehen

Nun drehen wir den Container mit einer CSS-transform um -90 Grad. Und da haben Sie es: einen horizontalen Scroller.

.horizontal-scroll-wrapper {
  ...
  transform: rotate(-90deg);
  transform-origin: right top;
}

Es gibt nur ein kleines Problem: Unsere Kinder sind auch rotiert, und nun ist alles darin auf der Seite.

Schritt 3) Die Kinder wieder aufrecht drehen

Wie bekommen wir die Kinder wieder aufrecht? Drehen Sie sie mit einer anderen, entgegengesetzten CSS-transform zurück.

.horizontal-scroll-wrapper > div {
  ...
  transform: rotate(90deg);
  transform-origin: right top;
}

Schritt 4) Die Positionierung korrigieren

Es beginnt gut auszusehen, aber es gibt immer noch einige Probleme.

Durch das Drehen des Wrappers mit der oberen rechten Ecke als Ankerpunkt hat sich unsere linke Seite um die Breite des Containers verschoben. Wenn Sie das schwer verstehen können, legen Sie einfach Ihren Finger auf die obere rechte Ecke einer Seite und drehen Sie sie. Die Lösung: verschieben Sie sie mit translateY zurück.

Besser. Aber das erste Element fehlt immer noch, aufgrund desselben Phänomens, das auch bei den Elementen auftritt. Wir könnten dies beheben, indem wir dem ersten Kind einen oberen Rand in Höhe seiner Breite geben oder alle Elemente so verschieben, wie wir es mit dem Wrapper gemacht haben. Der einfachste Weg, den ich gefunden habe, ist jedoch, dem Wrapper einen oberen Innenabstand in Höhe der Elementbreite hinzuzufügen, um eine Art Puffer für die Elemente zu schaffen.

.horizontal-scroll-wrapper {
  ...
  transform:rotate(-90deg) translateY(-100px);
  ...
}

Demo

Siehe den Pen Horizontal scroll (simple example) von Pieter Biesemans (@pieter-biesemans) auf CodePen.

Hier ist ein weiterer, bei dem Sie nicht quadratische Kinder sehen können

Siehe den Pen Horizontal scroll (extensive example) von Pieter Biesemans (@pieter-biesemans) auf CodePen.

Kompatibilität

Ich habe auf den mir sofort verfügbaren Geräten getestet.

Gerät	Betriebssystem	Browser	Funktioniert?
Desktop	Win10	Chrome 54	Y
Desktop	Win10	Firefox 47	Y (mit Scrollbalken)
Desktop	Win10	IE11	Y (mit Scrollbalken)
Desktop	Win10	Opera 41	Y
Desktop	Win10	Vivaldi 1.4	Y
Laptop (Touchscreen)	Win10	Chrome 54	N
Samsung Galaxy S3	Android 4.3	Chrome Mobile 52	Y
Samsung Galaxy S6	Android 5.0	Chrome Mobile 52	Y
Nexus 6P	Android 6	Chrome Mobile 52	Y
iPad2	iOS	Chrome Mobile 52	N
iPad2	iOS	Safari Mobile 9.0	N
iPad Air 2	iOS	Safari Mobile 9.0	N

Desktop

Da das Styling von Scrollbalken derzeit nur von WebKit/Blink unterstützt wird, zeigen Firefox und IE immer noch die hässlichen grauen an. Sie könnten dies mit JavaScript erkennen und sie vollständig ausblenden, aber das ist Stoff für ein anderes Tutorial.

Die Verwendung des Mausrads funktioniert auf Desktops hervorragend. Mein Laptop war jedoch eine andere Sache. **Sowohl der Touchscreen als auch das Touchpad verhielten sich, als wäre das div nicht gedreht.**

Mobil

Ich war ziemlich überrascht festzustellen, dass Android tatsächlich verstand, dass der Container gedreht worden war, und Sie durch Wischen nach links und rechts seitwärts scrollen konnten.

**iOS hingegen spielte nicht gut mit.** Es verhielt sich so, als wäre der Container nicht gedreht worden, sodass Sie nach oben und unten wischen müssen, um seitwärts zu scrollen, was natürlich kontraintuitiv ist. Außerdem verschiebt das Wischen nach links und rechts die Elemente in ihrem Wrapper nach oben und unten, was unerwartet und seltsam ist. Das Setzen des Überlaufs auf „hidden“ lindert dieses Problem nicht.

Fazit

Laut Can I Use werden CSS-Transforms derzeit von über 93% der Nutzer unterstützt (zum Zeitpunkt des Schreibens, November 2016), also gibt es dort kein Problem.

Seien Sie jedoch vorsichtig bei der Verwendung in der Produktion. Ich habe dies auf einigen Geräten getestet, aber nicht sehr umfassend oder tiefgehend.

Das größte Problem sind Touch-Eingaben, bei denen Sie nach oben und unten wischen müssen, um nach links und rechts zu gelangen. Eine mögliche Lösung wäre, eine Nachricht auf Ihrer Website anzuzeigen, die dies erklärt, aber Sie wären darauf angewiesen, dass die Leute Ihre Nachricht lesen. Und selbst dann wäre es immer noch kontraintuitiv. Eine weitere mögliche Lösung wäre, die Touch-Eingabe mit JavaScript auf diesen Geräten abzufangen, aber dann wäre es besser, alles in JavaScript zu erledigen und diesen CSS-Hack komplett aufzugeben.