Erstellen einer Website mit horizontalem Scrollen

Wenn Webseiten aus Holz wären, würde die Maserung auf und ab laufen. Vertikal ist der natürliche Fluss des Web-Layouts. Wenn Seitenelemente den rechten Rand des Browserfensters erreichen und darüber hinausgehen, wird der Fluss standardmäßig auf „Umbrechen“ dieses Elements auf die nächste Zeile gesetzt. Je mehr Inhalt auf der Seite, desto höher wird sie, nicht breiter. Warum ist das so? Weil es einfach Sinn macht. Unsere Augen sind es gewohnt, ziemlich kurze Textzeilen zu lesen, daher wäre es schmerzhaft zu lesen, wenn wir einen Textabsatz in einer langen geraden Zeile sehen würden. Absätze benötigen Zeilenumbrüche, um lesbar zu sein (daher der Begriff „Textblöcke“). Wir wollen sicherlich keine Zeilenumbrüche selbst in den Markup-Code einfügen. Offensichtlich müssen wir das nicht, der Browser macht dieses Umbrechen für uns. Daher die vertikale Expansion.

Dieser natürliche Fluss hat zu Konventionen im Webseitenlayout und sogar in der Hardware selbst geführt. Beachten Sie, wie viele Computermäuse ein spezielles Scrollrad ausschließlich zum vertikalen Scrollen haben. Aber Webseiten sind mit sowohl vertikalen als auch horizontalen Scrollbalken ausgestattet, richtig? Wenn wir mit unserem Webseitenlayout verantwortungsvoll umgehen, können wir „gegen den Strich“ gehen und Webseiten erstellen, die hauptsächlich horizontal scrollen und sich sogar horizontal erweitern, wenn wir mehr Inhalt hinzufügen. Vielleicht ein leichter Nachteil für die „Benutzerfreundlichkeit“, aber es kann sicherlich ein cooles kreatives Detail sein!

Der beste Weg, es zu tun

Ich wage zu behaupten, dass eine Tabelle die beste Layout-Technik für eine horizontal scrollende Website ist.

Update: Dies ist ein ziemlich alter Artikel. Der Kernpunkt war, dass man mit einer Tabelle Elemente in einer Zeile anordnen kann, die sich endlos fortsetzt, ohne dass sie umbrochen werden. Dies könnte man heute mit display: flex; auf einem übergeordneten Element viel einfacher erreichen, obwohl die Benutzererfahrung hier ziemlich fragwürdig ist.

Bevor ich erkläre, warum, schauen wir uns ein paar andere mögliche Techniken an

• Festlegen einer sehr breiten statischen Breite. Vielleicht ist der „schnellste und schmutzigste“ Weg, um ein horizontales Layout zu starten, einfach eine sehr breite statische Breite für das `body`-Element selbst festzulegen. Sagen wir 10000px. Probieren Sie es ruhig aus, Sie erhalten sicher einen horizontalen Scrollbalken. Während dies funktioniert, ist es etwas unflexibel. Webseiten sind dynamische Orte, und wir sollten auf Erweiterbarkeit vorbereitet sein, anstatt uns durch statische Breiten einzuschränken. Denken Sie an normale vertikal scrollende Seiten. Sie legen doch keine statischen Höhen für Ihre Seiten fest, oder?
• Floats + Whitespace. Ich habe einige Zeit mit der float-Eigenschaft und der white-space-Eigenschaft experimentiert, um zu sehen, ob ich einen Weg finden kann, das automatische Umbrechen des Browsers zu umgehen, aber ich hatte keinen großen Erfolg. Seitenelemente, die gefloatet sind, aber keine Breite haben, dehnen sich entsprechend der Breite ihres Inhalts aus. Ich dachte, vielleicht würde sich dies über die Breite des Browserfensters hinaus erweitern, wenn ich viele gefloatete Elemente darin platziere. Kein Erfolg. Es gibt auch die Eigenschaft white-space: nowrap; in CSS, die ich ausnutzen wollte, um das automatische Umbrechen zu verhindern, aber sie funktioniert nur für Textelemente, nicht für Blöcke oder alles andere, was als Inline gesetzt ist. Nun ja.
• Verwendung von JavaScript zum Festlegen einer Breite. JavaScript hat eindeutig die Fähigkeit, Seitenelemente zu manipulieren und Berechnungen on-the-fly durchzuführen. Wir könnten dies nutzen, um eine Umgebung zu schaffen, die sich extensibel verhält. Es gilt jedoch als schlechter Stil, das Seitenlayout mit JavaScript zu handhaben. Ich stimme dem im Allgemeinen zu, aber ich glaube, Sie können JavaScript auf diese Weise verwenden, solange Sie dies unauffällig tun und darauf achten, dass die Seite auch bei deaktiviertem JavaScript ein nutzbares Layout bietet.

Die <table>-Methode

Was wir brauchen, ist ein Seitenelement, das sich bei Bedarf horizontal ausdehnen kann und niemals „umbricht“. Eine Zeile von Tabellenzellen passt hier perfekt. Tabellenzellen dehnen sich von Natur aus aus, um den darin enthaltenen Inhalt aufzunehmen, und sie werden niemals umgebrochen, bis eine neue Zeile beginnt. Perfekt.

Nehmen wir an, wir möchten eine Reihe von Blogbeiträgen nebeneinander horizontal anordnen. Wir müssten eine Seitenstruktur wie diese verwenden

<table>
  <tr>
    <td>
       ..  blog post #1
    </td>
    <td>
       ..  blog post #2
    </td>
    <td>
       ..  blog post #3
    </td>
  </tr>
</table>

Igitt, richtig? Es fühlt sich nie gut an, Markup wie dieses zu verwenden, nicht nur, weil es eine Tabelle ist, sondern auch wegen der mangelnden Semantik. Wir verwenden hier eine Reihe von Tags, die ausschließlich der Darstellung dienen und nichts mit dem Inhalt zu tun haben.

Idealerweise wäre unsere Seitenstruktur wie folgt

<article class="post">
  .. blog post #1 ..
</article>
<article class="post">
  .. blog post #2 ..
</article>
<article class="post">
  .. blog post #3 ..
</article>

Mit jQuery können wir ganz einfach das Beste aus beiden Welten haben!

Schreiben Sie das gewünschte Markup, erhalten Sie das benötigte Markup

Wir werden jQuery verwenden, um uns zu ermöglichen, das gewünschte Markup (die Div-Struktur) zu erhalten und es so zu manipulieren, dass wir das für horizontales Scrollen benötigte Markup (die Tabellenstruktur) erhalten. Sie solltenalarmsignale in Ihrem Kopf hören, wenn Sie JavaScript für das Layout verwenden, aber ruhen Sie sich aus, wir werden sicherstellen, dass das Layout auch ohne aktiviertes JavaScript perfekt nutzbar ist. Als zusätzlichen Bonus ist das Layout auch mit oder ohne aktiviertes CSS sowie mit jeder Kombination nutzbar.

Lassen Sie uns zuerst durchdenken, was wir möchten

• Umschließen Sie ALLE Beiträge in einem einzigen Tabellen-Tag und einem einzigen Zeilen-Tag
• Umschließen Sie JEDEN Beitrag in einem Tabellenzellen-Tag

Fügen wir nun jQuery in den Kopfbereich unserer Seite ein und schreiben Sie das benötigte jQuery, um dies zu erreichen.

<script src="js/jquery.js"></script>
<script>
  $(function() {
    $("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
    $(".post").wrap("<td>");
  });
</script>

Das sollte es erledigt haben! Beachten Sie, wie die Zellabstände als Inline-Attribut zum Tabellenelement hinzugefügt werden. Wir könnten normalerweise mit CSS Abstände zu Zellen anwenden, aber wir möchten sicherstellen, dass jeder Blogbeitrag auch ohne CSS gut lesbar ist. Ohne dies würden die Blöcke direkt nebeneinander liegen, was sie schwer lesbar macht.

Die gesamte CSS-Datei für dieses Beispiel ist sehr sehr einfach

* {
  margin: 0; 
  padding: 0; 
}
body { 
  font-size: 62.5%; 
  font-family: 'Lucida Grande', Helvetica, sans-serif;
  background: #121212;
  color: #999; 
  padding: 20px;
}
tr { 
  vertical-align: top;
}
.post { 
  width: 500px; 
}
p { 
  font-size: 1.2em; 
  margin: 0 0 15px 0; 
}
h1 { 
  font-family: Sans-serif; 
  font-size: 4.0em;
  letter-spacing: -1px; 
  color: #ccc; 
}
h2 { 
  font-family: Sans-Serif; 
  font-size: 3.0em;
  letter-spacing: -1px; 
  color: #ccc; 
}

Nur ein paar bemerkenswerte Dinge. Die statische Breite des `.post`-Divs steuert die Breite jedes Blocks. Die `vertical-align`-Eigenschaft der Tabellenzeile hält jeden der Blöcke am oberen Rand seiner Tabellenzellen ausgerichtet. Dies ist standardmäßig auf Mitte gesetzt, daher ist dies notwendig.

Die Ergebnisse

Mit aktiviertem CSS und JavaScript (99% der Benutzer) haben wir eine gut umgesetzte horizontal scrollende Website. Ohne CSS und JavaScript (Bildschirmlesegeräte) regiert die Struktur der einzelnen Blogbeiträge die Seite, vorausgesetzt, sie sind semantisch markiert, die Seite wird großartig aussehen. Die einzige Besonderheit hier ist, wenn JavaScript aktiviert ist und CSS deaktiviert ist (SELTEN), sieht die Seite ein wenig bizarr aus.

Siehe den Stift
Beiträge in einer horizontalen Reihe durch Tabellen-Wrapping von Chris Coyier (@chriscoyier)
auf CodePen.

Andere Techniken für horizontales Scrollen

Das buchstäbliche Erweitern der Breite Ihrer Seite und die Verwendung von Scrollbalken zur Navigation ist nur eine Möglichkeit, den horizontalen Scroll-Effekt zu erzielen. JavaScript-Slider sind ein weiterer Weg, den Sie einschlagen können, der den Effekt simuliert. Flash wäre eine weitere Möglichkeit. Wenn es um Webdesign geht, gibt es immer viele Wege!