Ein grundlegender Überblick über das Erstellen einer responsiven horizontalen ScrollView für Fernseher, Smartphones, Computer usw.
In diesem Beitrag möchte ich Ihnen zeigen, wie Sie horizontales Scrollen ermöglichen. für das Web, die minimal, responsiv, barrierefrei sind und auf verschiedenen Browser und Plattformen (z. B. Fernseher). Testen Sie die Demo ansehen.
<ph type="x-smartling-placeholder">Falls Sie Videos bevorzugen, finden Sie hier eine YouTube-Version dieses Beitrags:
Übersicht
Wir entwickeln ein horizontales Scroll-Layout, mit dem wir Miniaturansichten
Medien oder Produkte. Die Komponente beginnt mit einer einfachen <ul>-Liste, ist aber
mit CSS zu einem
befriedigenden und reibungslosen Scroll-Erlebnis
und sie an einem Raster andocken. JavaScript wurde hinzugefügt, um
Interaktionen mit dem Roving-Index, sodass Tastaturnutzer sich nicht durch mehr als 100 Elemente bewegen können.
Außerdem wird mit der experimentellen Medienabfrage prefers-reduced-data
zum einfachen Scrollen des Titels.
Mit barrierefreiem Markup beginnen
Ein Medien-Scroller besteht aus nur zwei Hauptkomponenten, einer Liste mit Elementen. A Listen können in ihrer einfachsten Form um die ganze Welt reisen und die von allen genutzt werden. Nutzer, die auf diese Seite weitergeleitet werden, können eine Liste durchsuchen und auf einen Link klicken. um ein Element anzuzeigen. Das ist unsere barrierefreie Basis.
Eine Liste mit einem <ul>-Element senden:
<ul class="horizontal-media-scroller">
<li></li>
<li></li>
<li></li>
...
<ul>
Mit einem <a>-Element können Sie die Listenelemente interaktiv gestalten:
<li>
<a href="#">
...
</a>
</li>
Mit einem <figure>-Element können Sie ein Bild und den zugehörigen Untertitel semantisch darstellen:
<figure>
<picture>
<img alt="..." loading="lazy" src="https://picsum.photos/500/500?1">
</picture>
<figcaption>Legends</figcaption>
</figure>
Beachten Sie die Attribute alt und loading für <img>. Alt-Text für ein Medium
ist eine UX-Gelegenheit, mit der das Thumbnail zusätzlichen Kontext erhält
Fallback-Text, wenn das Bild nicht geladen wurde oder eine gesprochene Benutzeroberfläche für Nutzer zur Verfügung steht
auf assistive Technologien wie Screenreader angewiesen. Weitere Informationen zu Five golden
Regeln für konform (alt)
Text.
Das Attribut „loading“ akzeptiert das Keyword „lazy“ als Signal für dieses Bild
Quelle sollte nur abgerufen werden, wenn sich das Bild im Darstellungsbereich befindet. Dabei kann es sich um
sehr nützlich für große Listen, da Nutzende nur Bilder für Artikel herunterladen,
gescrollt werden kann.
Die Farbschema-Präferenzen des Nutzers unterstützen
Verwende color-scheme als <meta>-Tag, um dem Browser zu signalisieren, dass deine Seite
möchte sowohl den hellen als auch den dunklen User-Agent-Stil. Das ist ein kostenloser dunkler Modus
oder dem hellen Modus, je nachdem, wie Sie sie betrachten:
<meta name="color-scheme" content="dark light">
Das Meta-Tag liefert das frühestmögliche Signal, sodass der Browser kann eine dunkle Standard-Canvas-Farbe auswählen, wenn der Nutzer ein dunkles Design verwendet. Das bedeutet, dass beim Aufrufen von Seiten der Website kein weißer Canvas angezeigt wird. zwischen Ladevorgängen im Hintergrund ab. Nahtloser dunkler Modus zwischen zwei Ladevorgängen – viel besser auf der Augen.
Weitere Informationen von Thomas Steiner finden Sie unter https://web.dev/color-scheme/.
Inhalt hinzufügen
In Anbetracht der oben genannten Inhaltsstruktur ul > li > a > figure > picture > img
Als Nächstes fügen Sie Bilder und Titel hinzu,
durch die Sie scrollen können. Ich habe die Demo gepackt mit
statische Platzhalterbilder und -text, aber Sie können diese Funktion über Ihr
bevorzugte Datenquelle.
Stil mit CSS hinzufügen
Jetzt ist es an der Zeit, dass CSS diese allgemeine Liste von Inhalten in eine Nutzererfahrung. Netflix, App Stores und viele weitere Websites und Apps nutzen horizontale um den Darstellungsbereich mit Kategorien und Optionen zu füllen.
Scroller-Layout erstellen
Es ist wichtig, nicht den Inhalt in Layouts abgeschnitten oder auf Text zu stützen. mit Auslassungspunkten abgeschnitten. Viele Fernsehgeräte verfügen über Medien-Scroller wie aber allzu oft mit Auslassungspunkten versehen. Bei diesem Layout ist das nicht der Fall. Außerdem wird die Spaltengröße durch den Medieninhalt überschrieben, sodass ein Layout flexibel genug, um viele interessante Kombinationen bewältigen zu können.
Der Container ermöglicht das Überschreiben der Spaltengröße durch Angabe der Standardgröße als eine benutzerdefinierte Eigenschaft. Bei diesem Rasterlayout geht es um die Spaltengröße, Verwaltung der Abstände und Richtungen:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2); /* parent owned value for children to be relative to*/
margin: 0;
}
Die benutzerdefinierte Eigenschaft wird dann vom <picture>-Element verwendet, um unser grundlegendes Seitenverhältnis zu erstellen – ein Feld:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
Mit nur wenigen weiteren kleineren Stilen vervollständigen Sie die Grundfunktionen des Medien-Scrollers:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
& > li {
display: inline-block; /* removes the list-item bullet */
}
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
Wenn du overflow festlegst, wird <ul> so eingerichtet, dass Scrollen und die Tastaturnavigation erlaubt sind
durch seine Liste gelöscht, dann wird für jedes direkte untergeordnete <li>-Element das Element ::marker entfernt.
indem Sie den neuen Display-Typ inline-block erhalten.
Die Bilder sind jedoch noch nicht responsiv und werden sofort nach dem Auspacken angezeigt. wo sie sich befinden. Zähmen Sie sie mit bestimmten Größen, Passformen und Rahmenstilen und einen Hintergrundverlauf beim Lazy Loading:
img {
/* smash into whatever box it's in */
inline-size: 100%;
block-size: 100%;
/* don't squish but do cover the space */
object-fit: cover;
/* soften the edges */
border-radius: 1ex;
overflow: hidden;
/* if empty, show a gradient placeholder */
background-image:
linear-gradient(
to bottom,
hsl(0 0% 40%),
hsl(0 0% 20%)
);
}
Abstand beim Scrollen
Die Ausrichtung am Seiteninhalt sowie eine randlose Scrollfläche ist entscheidend für eine harmonische und minimale Komponente.
Um das randlose Scroll-Layout zu erreichen, das zu unserer Typografie passt
und Layoutlinien, verwenden Sie padding, die dem scroll-padding entsprechen:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block: calc(var(--gap) / 2); /* make space for scrollbar and focus outline */
}
Fehlerkorrektur beim horizontalen Scrollen mit Abstand Das obige Beispiel zeigt, wie einfach es sein sollte, einen Scroll-Container auffüllt, aber es gibt ungelöste Kompatibilitätsprobleme damit. Das Problem wurde jedoch in Chromium 91 und höher behoben. Weitere Informationen finden Sie unter hier für eine kurze Zeit über Kurze Zusammenfassung: Abstände wurden nicht immer berücksichtigt. in einer Scroll-Ansicht.
Um Browser dazu zu bringen, die Abstände an das Ende des Scrollers zu setzen, auf die letzte Abbildung in jeder Liste ausrichten und ein Pseudoelement anhängen, gewünschten Padding-Wert.
.horizontal-media-scroller > li:last-of-type figure {
position: relative;
&::after {
content: "";
position: absolute;
inline-size: var(--gap);
block-size: 100%;
inset-block-start: 0;
inset-inline-end: calc(var(--gap) * -1);
}
}
Die Verwendung logischer Eigenschaften ermöglicht es dem Medien-Scroller, in jedem Schreibmodus zu arbeiten. und die Richtung des Dokuments.
Scrollen und Andocken
Ein scrollbarer Container mit Überlauf kann zu einem ausgerichteten Darstellungsbereich mit einer einzigen CSS-Zeile werden. Dann legen untergeordnete Elemente fest, wie sie an diesem Darstellungsbereich ausgerichtet werden sollen.
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block-end: calc(var(--gap) / 2);
scroll-snap-type: inline mandatory;
& figure {
scroll-snap-align: start;
}
}
Fokus
Die Inspiration für diese Komponente stammt von ihrer enormen Beliebtheit auf Fernsehern, in App Stores usw. Viele Videospielplattformen nutzen ähnlich wie diese hier, da sie das primäre Layout des Startbildschirms verwenden. Fokus ist ein großes UX-Design nicht nur eine kleine Ergänzung. Stellen Sie sich vor, Sie könnten diesen Medien-Scroller aus der mit einer Fernbedienung haben, bieten Sie dieser Interaktion ein paar kleine Verbesserungen:
.horizontal-media-scroller a {
outline-offset: 12px;
&:focus {
outline-offset: 7px;
}
@media (prefers-reduced-motion: no-preference) {
& {
transition: outline-offset .25s ease;
}
}
}
Dadurch wird der Umriss des Fokus 7px weiter vom Rechteck entfernt, was ihm
Leerzeichen. Wenn Nutzende keine Bewegungspräferenzen bezüglich der Reduzierung von Bewegungen haben, wird der Offset
übergangen wird und dem Fokusereignis eine leichte Bewegung verleiht.
Roving Index
Gamepad- und Tastaturnutzer brauchen besondere Aufmerksamkeit. und Optionen für das Scrollen. Das allgemeine Muster zur Lösung dieses Problems Suche-Index. Dabei handelt es sich um Der Container mit Elementen ist auf die Tastatur fokussiert, aber nur ein untergeordnetes Element darf den Fokus halten auf einmal ansehen. Bei diesem fokussierbaren Element die potenziell lange Liste von Elementen umgehen, anstatt die Tabulatortaste 50+ bis das Ende erreicht ist.
Im ersten Bildlauf der Demo gibt es 300 Elemente. Wir können es besser, als durchqueren sie alle, um zum nächsten Abschnitt zu gelangen.
Um diese Funktion zu nutzen, muss JavaScript Tastaturereignisse beobachten und den Fokus auf Ereignisse. Ich habe eine kleine Open-Source-Bibliothek npm, damit der Nutzer User Experience einfach umzusetzen. So nutzen Sie die Funktion für die drei Scroller:
import {rovingIndex} from 'roving-ux';
rovingIndex({
element: someElement
});
Diese Demo fragt das Dokument nach den Scrollers ab und ruft für jede von ihnen den
rovingIndex(). Übergib das rovingIndex()-Element und hol dir das Roving
wie ein Listencontainer und eine Zielabfrageauswahl, für den Fall,
Fokusziele sind keine direkten Nachfolger.
document.querySelectorAll('.horizontal-media-scroller')
.forEach(scroller =>
rovingIndex({
element: scroller,
target: 'a',
}))
Weitere Informationen zu diesem Effekt findest du in der Open-Source-Bibliothek roving-ux
Seitenverhältnis
Zum Zeitpunkt der Erstellung dieses Posts hat sich der Support für
aspect-ratio liegt hinter einem
in Firefox, aber verfügbar in Chromium-Browsern oder Set-Top-Boxen. Da die
gibt nur die Richtung und den Abstand an, die Größe kann
Änderung innerhalb einer Medienabfrage, die die Unterstützung des Seitenverhältnisses prüft.
Progressive Enhancement in einige dynamischere Medien-Scroller ein.
@supports (aspect-ratio: 1) {
.horizontal-media-scroller figure > picture {
inline-size: auto; /* for a block-size driven ratio */
aspect-ratio: 1; /* boxes by default */
@nest section:nth-child(2) & {
aspect-ratio: 16/9;
}
@nest section:nth-child(3) & {
/* double the size of the others */
block-size: calc(var(--size) * 2);
aspect-ratio: 4/3;
/* adjust size to fit more items into the viewport */
@media (width <= 480px) {
block-size: calc(var(--size) * 1.5);
}
}
}
}
Wenn der Browser die Syntax aspect-ratio unterstützt, werden die Bilder der Scroller in den Medien wie folgt dargestellt:
wurde auf die Größenanpassung aspect-ratio aktualisiert. Unter Verwendung des Entwurfs für die Verschachtelungssyntax wird jedes Bild
ändert das Seitenverhältnis, je nachdem, ob es sich um die erste, zweite oder dritte Zeile handelt. Die
nest-Syntax auch die Einstellung einiger kleiner
mit der anderen Größenanpassungslogik.
Da die Funktion in immer mehr Browser-Engines verfügbar ist, lässt sich mit diesem CSS aber optisch ansprechender ist das Layout.
Bevorzugt reduzierte Daten
Diese nächste Technik ist nur
hinter einer Flagge
Canary
Ich wollte Ihnen zeigen, wie ich die Seitenladezeit
beträchtlich sparen und
einige Zeilen CSS verwenden. Die Medienabfrage prefers-reduced-data von
Bei Level 5 wird die Frage gestellt, ob sich das Gerät in
reduzierten Datenzuständen
wie dem Datensparmodus. Ist dies der Fall, kann ich die
und in diesem Fall die Bilder ausblenden.
figure {
@media (prefers-reduced-data: reduce) {
& {
min-inline-size: var(--size);
& > picture {
display: none;
}
}
}
}
Die Inhalte sind weiterhin navigierbar, aber ohne die Kosten für aufwendige Bilder
heruntergeladen. Dies ist die Website, bevor das CSS-Element prefers-reduced-data hinzugefügt wird:
(7 Anfragen, 100 KB Ressourcen in 131 ms)
Hier ist die Websiteleistung nach dem Hinzufügen des CSS-Codes prefers-reduced-data:
(71 Anfragen, 1,2 MB Ressourcen in 1.07 s)
64 Anfragen weniger, dies wären die ca. 60 Bilder im Darstellungsbereich (durchgeführte Tests) auf einem Breitbildbildschirm) dieses Browsertabs, eine Steigerung beim Seitenaufbau um ca. 80 % 10% der Daten übertragen. Ziemlich leistungsstarkes CSS.
Fazit
Jetzt, da du weißt, wie ich das gemacht habe, wie würdest du es tun?! 🙂
Lassen Sie uns unsere Herangehensweisen diversifizieren und alle Möglichkeiten kennenlernen, wie wir das Web entwickeln können. Erstellen Sie einen Codepen oder hosten Sie Ihre eigene Demo, twittern Sie mich mit dem Code und ich füge ihn zur Community-Remixe weiter unten.
Quelle
Community-Remixe
Hier gibt es noch nichts zu sehen.