Tab-Komponente erstellen

Ein grundlegender Überblick über das Erstellen einer Tab-Komponente, die denen in iOS- und Android-Apps ähnelt.

Adam Argyle

In diesem Beitrag geht es um die Entwicklung einer Tabs-Komponente für das Web. responsiv, unterstützt die Eingabe mehrerer Geräte und funktioniert browserübergreifend. Demo ansehen

Falls Sie Videos bevorzugen, finden Sie hier eine YouTube-Version dieses Beitrags:

Übersicht

Registerkarten sind eine gängige Komponente von Designsystemen, können aber viele Formen zu erstellen. Zuerst wurden Desktop-Tabs auf dem <frame>-Element erstellt und jetzt spezielle mobile Komponenten, die Inhalte basierend auf physikalischen Eigenschaften animieren. Alle haben dasselbe Ziel: Platz zu sparen.

Das Wichtigste für die User Experience von Tabs ist heute ein Schaltflächennavigationsbereich die die Sichtbarkeit von Inhalten in einem Anzeigeframe ein- und ausschalten. Viele verschiedene Content-Bereiche den gleichen Raum, werden aber basierend auf dem Schaltfläche ausgewählt.

</ph> <ph type="x-smartling-placeholder">

Webtaktik

Insgesamt fand ich diese Komponente recht einfach, dank einer einige wichtige Webplattformfunktionen:

• scroll-snap-points für elegante Wisch- und Tastaturinteraktionen mit geeignete Positionen für Scroll-Stopps
• Deeplinks über URL-Hashes für Unterstützung für Scroll-Anker und -Freigabe auf der Seite
• Screenreader-Unterstützung mit <a>- und id="#hash"-Element-Markup
• prefers-reduced-motion zum Aktivieren von Crossfade-Übergängen und Instant-Funktion In-Page-Scrollen
• Die Webfunktion „@scroll-timeline“ im Entwurf zum dynamischen Unterstreichen und Farbe des ausgewählten Tabs ändern

Im HTML-Code

Im Grunde sieht das UX-Design folgendermaßen aus: auf einen Link klicken, die URL muss den verschachtelten Seitenstatus. Der Inhaltsbereich wird aktualisiert, wenn im Browser zum übereinstimmenden Element.

Darin sind einige Mitglieder für strukturelle Inhalte enthalten: Links und :targets. Mi. eine Liste mit Links, für die ein <nav> gut geeignet ist, und eine Liste mit <article> Elemente, für die ein <section> gut geeignet ist. Jeder Link-Hash stimmt mit einem Abschnitt überein, sodass der Browser durch Anker scrollen kann.

Wenn Sie beispielsweise auf einen Link klicken, wird der Artikel :target automatisch Chrome 89, kein JS erforderlich Die Nutzenden können dann durch den Artikelinhalt scrollen, wie immer ihr Eingabegerät. Es handelt sich um ergänzende Inhalte, wie in den Markup.

Ich habe das folgende Markup verwendet, um die Tabs zu organisieren:

<snap-tabs>
  <header>
    <nav>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
    </nav>
  </header>
  <section>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
</snap-tabs>

Ich kann Verbindungen zwischen den Elementen <a> und <article> herstellen mit href- und id-Properties:

<snap-tabs>
  <header>
    <nav>
      <a href="#responsive"></a>
      <a href="#accessible"></a>
      <a href="#overscroll"></a>
      <a href="#more"></a>
    </nav>
  </header>
  <section>
    <article id="responsive"></article>
    <article id="accessible"></article>
    <article id="overscroll"></article>
    <article id="more"></article>
  </section>
</snap-tabs>

Dann füllte ich die Artikel mit einer Menge Lorem und die Links Titel mit unterschiedlicher Länge und Bildern. Mit den Inhalten, mit denen wir arbeiten können, Layout.

Scroll-Layouts

In dieser Komponente gibt es drei verschiedene Arten von Scrollbereichen:

• Die Navigationsleiste (pink) ist horizontal. scrollbar
• Der Inhaltsbereich (blau) ist horizontal. scrollbar
• Jeder Artikelartikel (grün) steht vertikal. scrollbar sind.

Beim Scrollen gibt es zwei verschiedene Arten von Elementen:

1. Ein Fenster
   Ein Feld mit definierten Abmessungen, das das Element overflow Eigenschaftsstil.
2. Eine zu große Oberfläche
   Bei diesem Layout sind das die Containerliste: nav Links, Bereichsartikel und Artikelinhalte.

Layout: <snap-tabs>

Das von mir gewählte Layout der obersten Ebene war Flex (Flexbox). stelle ich die Richtung auf column, sodass die Überschrift und der Abschnitt vertikal angeordnet sind. Dies ist unser erstes und alles mit ausgeblendetem Überlauf wird ausgeblendet. Die Überschrift und verwendet bald Overscroll als einzelne Zonen.

<snap-tabs>
  <header></header>
  <section></section>
</snap-tabs>

  snap-tabs {
  display: flex;
  flex-direction: column;

  /* establish primary containing box */
  overflow: hidden;
  position: relative;

  & > section {
    /* be pushy about consuming all space */
    block-size: 100%;
  }

  & > header {
    /* defend against 
 needing 100% */
    flex-shrink: 0;
    /* fixes cross browser quarks */
    min-block-size: fit-content;
  }
}

Zurück zum bunten Diagramm mit 3 Scrollen:

• <header> wird jetzt (rosa) Scroll-Container.
• <section> ist bereit, die Schriftrolle in (blau) zu sein Container.

Die von mir hervorgehobenen Frames VisBug hilft uns dabei, die Fenster des die Scroll-Container erstellt haben.

Layout der Tabs <header>

Das nächste Layout ist fast gleich: Ich verwende Flex, um eine vertikale Reihenfolge zu erstellen.

<snap-tabs>
  <header>
    <nav></nav>
    <span class="snap-indicator"></span>
  </header>
  <section></section>
</snap-tabs>

header {
  display: flex;
  flex-direction: column;
}

.snap-indicator sollte sich zusammen mit der Gruppe der Links horizontal bewegen. mithilfe dieses Header-Layouts einen Rahmen schaffen. Hier gibt es keine absolut positionierten Elemente!

Als Nächstes die Scrollstile. Es stellt sich heraus, dass wir die Scrollstile zwei horizontalen Scroll-Bereichen (Kopfzeile und Abschnitt) bewegen. Klasse, .scroll-snap-x.

.scroll-snap-x {
  /* browser decide if x is ok to scroll and show bars on, y hidden */
  overflow: auto hidden;
  /* prevent scroll chaining on x scroll */
  overscroll-behavior-x: contain;
  /* scrolling should snap children on x */
  scroll-snap-type: x mandatory;

  @media (hover: none) {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
}

Jede benötigt einen Überlauf auf der x-Achse, Scroll-Begrenzungen, um Overscroll einzufangen, ausgeblendet. Scrollleisten für Geräte mit Touchscreen und Scroll-Snap zum Sperren von Inhalten Präsentationsbereichen. Unsere Tastatur-Tab-Reihenfolge ist zugänglich und jede Interaktionsanleitung natürlich konzentrieren. Scroll-Snap-Container erhalten auch ein schönes Karussell. über die Tastatur interagieren können.

Layout der Tab-Kopfzeile <nav>

Die Navigationslinks müssen in einer Zeile ohne Zeilenumbrüche dargestellt werden, und zwar vertikal. zentriert und jedes Linkelement sollte am Behälter für Scroll-Snap einrasten. Swift für das Preisvergleichsportal 2021!

<nav>
  <a></a>
  <a></a>
  <a></a>
  <a></a>
</nav>

  nav {
  display: flex;

  & a {
    scroll-snap-align: start;

    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
}

Jeder Link wird jeweils mit einem Stil und einer Größe versehen, sodass im Navigationslayout Richtung und Fluss. Eindeutige Breiten von Navigationselementen sorgen für den Wechsel zwischen Tabs. die Breite des Indikators an das neue Ziel anpasst. Je nachdem, wie viele Elemente vorhanden sind, rendert der Browser eine Bildlaufleiste oder nicht.

Layout der Tabs <section>

Dieser Abschnitt ist ein flexibles Element und muss der dominante Nutzer des Speicherplatzes sein. Es Außerdem müssen Spalten erstellt werden, in denen die Artikel platziert werden sollen. Noch einmal schnell für das Preisvergleichsportal 2021! Mit block-size: 100% wird dieses Element gestreckt, um den möglichst übergeordnete Elemente, dann erstellt sie für ein eigenes Layout eine Reihe von Spalten, die 100% der Breite des übergeordneten Elements entsprechen. Prozentsätze funktionieren hier gut. da wir starke Beschränkungen für das übergeordnete Element geschrieben haben.

<section>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</section>

  section {
  block-size: 100%;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
}

Das Ergebnis ist „vertikal so weit wie möglich und aufdringlich maximieren“. (Denken Sie an den Header „flex-shrink: 0“, der eine Abwehrmaßnahme gegen Erweiterungs-Push), wodurch die Zeilenhöhe für einen Satz von Spalten mit voller Höhe festgelegt wird. Die Mit dem Stil auto-flow wird vom Raster festgelegt, dass die Kinder immer horizontal angeordnet sind kein Zeilenumbruch, genau das, was wir wollen. damit das übergeordnete Fenster überläuft.

Manchmal finde ich solche Sachen manchmal schwierig. Dieses Abschnittselement ist die in einen Karton passen, aber auch eine Reihe von Kartons kreierten. Ich hoffe, dass die visuellen Elemente Erklärungen helfen.

Layout der Tabs <article>

Der Nutzer sollte durch den Artikelinhalt scrollen können und die Bildlaufleisten sollten wenn es einen Überlauf gibt. Diese Artikelelemente befinden sich . Sie sind gleichzeitig ein übergeordnetes Element für das Scrollen und ein untergeordnetes Element vom Typ „Scrollen“. Die handhabt der Browser einige knifflige Berührungs-, Maus- und Tastaturinteraktionen. für uns.

<article>
  <h2></h2>
  <p></p>
  <p></p>
  <h2></h2>
  <p></p>
  <p></p>
  ...
</article>

article {
  scroll-snap-align: start;

  overflow-y: auto;
  overscroll-behavior-y: contain;
}

Ich habe mich dafür entschieden, dass die Artikel im übergeordneten Scroller erscheinen. Mir gefällt wie die Navigationslinkelemente und die Artikelelemente am Inline-Start- der jeweiligen Scroll-Container. Sie sieht aus wie ein harmonisches Beziehung.

Der Artikel ist ein untergeordnetes Raster, dessen Größe vorab als Darstellungsbereich festgelegt ist. Bereich, den wir für Scroll-UX bieten. Das heißt, ich brauche keine Höhe oder Breite Stile hier, muss ich nur definieren, wie es überläuft. Ich habe „overflow-y“ auf „auto“ gesetzt. und die Scroll-Interaktionen mit dem praktischen Overscroll-Verhalten Property.

Zusammenfassung der 3 Scrollbereiche

Unten habe ich in meinen Systemeinstellungen die Option "Bildlaufleisten immer anzeigen" ausgewählt. Ich glaube ist es doppelt wichtig, dass das Layout funktioniert, wenn diese Einstellung aktiviert ist, da sie das Layout und die Scroll-Orchestrierung zu überprüfen.

Ich denke, die Bildlaufleiste in dieser Komponente zeigt deutlich, die Scrollbereiche, die unterstützte Richtung und die Art und Weise, wie sie mit sich gegenseitig helfen. Überlegen Sie, wie jeder dieser Scroll-Fenster-Frames die übergeordneten Elemente des Rasters zu einem Layout.

Mit den Entwicklertools lässt sich dies visualisieren:

</ph> <ph type="x-smartling-placeholder">

Die Scroll-Layouts sind vollständig: Andocken, Deeplink möglich und Tastatur. zugänglich zu machen. Starke Grundlage für UX-Verbesserungen, Stil und Spaß

Funktionshighlight

Beim Scrollen fixierte untergeordnete Elemente behalten ihre Sperrposition während der Größenänderung. Das bedeutet, JavaScript muss beim Drehen des Geräts oder im Browser nichts sichtbar machen. die Größe anpassen. In den Chromium-Entwicklertools ausprobieren Gerät Modus von Sie wählen einen anderen Modus als Responsiv aus und passen dann die Größe des Geräterahmens an. Beachten Sie, dass das Element sichtbar und mit seinem Inhalt gesperrt bleibt. Dies wurde verfügbar, seit Chromium die Implementierung entsprechend der Spezifikation aktualisiert hat. Hier finden Sie Blogpost dazu

Animation

Das Ziel der Animationsarbeit ist es, Interaktionen klar mit der Benutzeroberfläche zu verknüpfen. Feedback geben. Dies hilft den Nutzenden dabei, zu ihrem (hoffentlich) dass alle Inhalte nahtlos gefunden werden können. füge ich Bewegung zielführend hinzu, bedingt. Nutzer können jetzt Bewegungen Betriebssystemeinstellungen und es macht mir viel Spaß, auf die Wünsche der Nutzer einzugehen.

Ich werde eine Tab-Unterstrich mit der Scrollposition des Artikels verknüpfen. Ein Andocken ist nicht sondern auch den Anfang und das Ende einer Animation verankert. Dadurch bleibt die <nav> erhalten, die als mini-map, mit dem Inhalt verknüpft. Wir überprüfen die Bewegungseinstellungen des Nutzers sowohl in CSS als auch in JS. Es gibt eine ein paar großartige Orte, um Rücksicht zu nehmen!

Scrollverhalten

Es besteht die Möglichkeit, das Bewegungsverhalten von :target und element.scrollIntoView(). Standardmäßig erfolgt die Suche sofort. Der Browser legt lediglich die Scrollposition Was ist, wenn wir zu dieser Scrollposition wechseln möchten, anstatt dort zu blinzeln?

@media (prefers-reduced-motion: no-preference) {
  .scroll-snap-x {
    scroll-behavior: smooth;
  }
}

Wir führen hier Bewegungen ein, also Bewegungen, die nicht gesteuert werden können, wie Scrollen, wird dieser Stil nur angewendet, wenn der Nutzer Bewegungen des Betriebssystems zu reduzieren. So wird nur das Scrollen für Menschen, die damit einverstanden sind.

Tab-Anzeige

Diese Animation soll dazu beitragen, den Indikator mit dem Status zu verknüpfen. des Inhalts. Ich habe beschlossen, border-bottom-Stile für Nutzer farbig zu überblenden die reduzierte Bewegungen und eine Scroll-Link-Animation mit Gleit- und Farbausblendung bevorzugen. für Nutzende, die kein Problem mit Bewegung haben.

In den Chromium-Entwicklertools kann ich die Einstellung ändern und die beiden unterschiedliche Übergangsstile. Es hat mir viel Spaß gemacht, das zu bauen.

@media (prefers-reduced-motion: reduce) {
  snap-tabs > header a {
    border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
    transition: color .7s ease, border-color .5s ease;

    &:is(:target,:active,[active]) {
      color: var(--text-active-color);
      border-block-end-color: hsl(var(--accent));
    }
  }

  snap-tabs .snap-indicator {
    visibility: hidden;
  }
}

Ich blende das .snap-indicator aus, wenn der Nutzer weniger Bewegung bevorzugt, weil ich nicht mehr benötigen. Dann ersetze ich ihn durch border-block-end-Stile und einen transition. In der Tab-Interaktion ist außerdem zu sehen, dass das aktive Navigationselement nur marken unterstrichen ist, aber die Schriftfarbe ist dunkler. Die Das aktive Element hat einen höheren Textfarbkontrast und einen hellen Unterlichtakzent.

Mit ein paar zusätzlichen CSS-Zeilen fühlt sich jemand gesehen (in dem Sinne, berücksichtigen wir ihre Bewegungspräferenzen. Ich liebe das.

@scroll-timeline

Im obigen Abschnitt habe ich Ihnen gezeigt, wie ich die Überblendung bei geringer Bewegung handhabe. und in diesem Abschnitt zeige ich Ihnen, wie ich den Indikator und ein scrollen. Als Nächstes geht es um experimentelle Funktionen. Ich hoffe, Sie sind so aufgeregt wie ich.

const { matches:motionOK } = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
);

Zuerst überprüfe ich die Bewegungseinstellungen des Nutzers in JavaScript. Wenn das Ergebnis von false, d. h., der Nutzer bevorzugt kleinere Bewegungen. In diesem Fall wird keine der Bewegungseffekte zum Scrollen.

if (motionOK) {
  // motion based animation code
}

Zum Zeitpunkt der Erstellung dieses Dokuments war die Browserunterstützung für @scroll-timeline ist kein Wert. Es ist ein Entwurfsspezifikation nur mit experimentelle Implementierungen. Es hat jedoch einen Polyfill, das ich hier .

ScrollTimeline

Zwar können mit CSS und JavaScript Scrollzeitachsen erstellt werden, JavaScript verwenden, damit ich in der Animation Messungen von Live-Elementen verwenden kann.

const sectionScrollTimeline = new ScrollTimeline({
  scrollSource: tabsection,  // snap-tabs > section
  orientation: 'inline',     // scroll in the direction letters flow
  fill: 'both',              // bi-directional linking
});

Eine Sache soll der Scrollposition einer anderen folgen. ScrollTimeline Ich definiere den Treiber des Scroll-Links, scrollSource. Normalerweise läuft eine Animation im Web im Vergleich zu einem globalen Zeitrahmen-Tick, aber mit ein benutzerdefiniertes sectionScrollTimeline im Speicher, kann ich das alles ändern.

tabindicator.animate({
    transform: ...,
    width: ...,
  }, {
    duration: 1000,
    fill: 'both',
    timeline: sectionScrollTimeline,
  }
);

Bevor ich zu den Keyframes der Animation komme, denke ich, den Follower des Scrollens darauf hinweisen, tabindicator, basierend auf auf einer benutzerdefinierten Zeitachse, das Scrollen unseres Abschnitts. Damit ist die Verknüpfung fertig, bei denen die letzte Zutat fehlt, also zustandsorientierte Punkte, zwischen denen die Animation erfolgen kann. Keyframes hinzufügen.

Dynamische Keyframes

Es gibt eine leistungsstarke, rein deklarative CSS-Art, @scroll-timeline, aber die von mir ausgewählte Animation war zu dynamisch. Es gibt keine kann zwischen der Breite von auto übergangen werden und es gibt keine Möglichkeit, basierend auf der Länge der untergeordneten Elemente eine Reihe von Keyframes erstellen.

Da JavaScript weiß, wie diese Informationen abgerufen werden, iterieren wir die Kinder selbst und rufen die berechneten Werte zur Laufzeit ab:

tabindicator.animate({
    transform: [...tabnavitems].map(({offsetLeft}) =>
      `translateX(${offsetLeft}px)`),
    width: [...tabnavitems].map(({offsetWidth}) =>
      `${offsetWidth}px`)
  }, {
    duration: 1000,
    fill: 'both',
    timeline: sectionScrollTimeline,
  }
);

Destrukturieren Sie für jeden tabnavitem die offsetLeft-Position und geben Sie einen String zurück. bei dem es als translateX-Wert verwendet wird. Dadurch werden vier Keyframes für die Transformation Animation. Das Gleiche wird für die Breite gemacht. Bei jedem wird die dynamische Breite abgefragt. und als Keyframe-Wert verwendet.

Hier ist ein Ausgabebeispiel, das auf meinen Schriftarten und Browsereinstellungen basiert:

TranslateX-Keyframes:

[...tabnavitems].map(({offsetLeft}) =>
  `translateX(${offsetLeft}px)`)

// results in 4 array items, which represent 4 keyframe states
// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]

Breiten-Keyframes:

[...tabnavitems].map(({offsetWidth}) =>
  `${offsetWidth}px`)

// results in 4 array items, which represent 4 keyframe states
// ["121px", "117px", "226px", "67px"]

Um die Strategie zusammenzufassen, wird der Tab-Indikator jetzt über vier Keyframes hinweg animiert. abhängig von der Scroll-Snap-Position des Abschnitts-Scrollers. Die Snap-Points deutliche Abgrenzungen zwischen unseren Keyframes erzeugen und die Synchronisierung der Animation.

Der Nutzer steuert die Animation durch seine Interaktion und sieht dabei die Breite und ändert sich die Position des Indikators von einem Abschnitt zum nächsten. ganz einfach durch Scrollen.

Vielleicht haben Sie es noch nicht bemerkt, aber ich bin sehr stolz auf den Farbübergang markiertes Navigationselement ausgewählt wird.

Das nicht ausgewählte helle Grau erscheint noch weiter nach unten verschoben, wenn die hervorgehobene kontrastreicher. Eine Übergangsfarbe für Text, z. B. wenn der Mauszeiger darauf bewegt wird, und wenn ausgewählt, geht es beim Scrollen weiter, damit die Farbe mit dem Unterstrich synchronisiert.

Gehen Sie dazu folgendermaßen vor:

tabnavitems.forEach(navitem => {
  navitem.animate({
      color: [...tabnavitems].map(item =>
        item === navitem
          ? `var(--text-active-color)`
          : `var(--text-color)`)
    }, {
      duration: 1000,
      fill: 'both',
      timeline: sectionScrollTimeline,
    }
  );
});

Für jeden Navigationslink in einem Tab ist diese neue Farbanimation erforderlich, mit der dasselbe Scrollen als Unterstrich markieren. Ich verwende dieselbe Zeitachse wie zuvor: beim Scrollen ein Tick ausgibt, können wir diese Markierung die gewünschte Animation. Wie zuvor erstelle ich vier Keyframes in der Schleife und kehre Farben.

[...tabnavitems].map(item =>
  item === navitem
    ? `var(--text-active-color)`
    : `var(--text-color)`)

// results in 4 array items, which represent 4 keyframe states
// [
  "var(--text-active-color)",
  "var(--text-color)",
  "var(--text-color)",
  "var(--text-color)",
]

Der Keyframe mit der Farbe var(--text-active-color) markiert den Link und ansonsten eine Standardtextfarbe. Die verschachtelte Schleife sorgt dafür, da die äußere Schleife jedes Navigationselement und die innere Schleife persönlichen Keyframes von navitem. Ich prüfe, ob das äußere Schleifenelement dasselbe wie die innere Schleife ein und erkennen, wann sie ausgewählt ist.

Es hat mir viel Spaß gemacht. Sehr.

Noch mehr JavaScript-Verbesserungen

Ich möchte Sie noch einmal daran erinnern, dass der Kern dessen, was ich Ihnen hier zeige, JavaScript Sehen wir uns nun an, wie wir dies verbessern können, wenn JS verfügbar.

Deeplinks

Deeplinks sind eher ein mobiler Begriff. Ich glaube aber, dass der Deeplink gibt es hier Tabs, mit denen Sie eine URL direkt zum Inhalt eines Tabs teilen können. Die navigiert der Browser zu der ID, die mit dem URL-Hash übereinstimmt. gefunden Dieser onload-Handler hat den Effekt plattformübergreifend angewendet.

window.onload = () => {
  if (location.hash) {
    tabsection.scrollLeft = document
      .querySelector(location.hash)
      .offsetLeft;
  }
}

Scroll-Ende-Synchronisierung

Unsere Nutzer klicken oder verwenden nicht ständig die Tastatur, manchmal ungestört scrollen können. Wenn das Scrollen für den Abschnitt anhält wo er landet, muss in der oberen Navigationsleiste entsprechend angepasst werden.

So warte ich auf das Scroll-Ende: js tabsection.addEventListener('scroll', () => { clearTimeout(tabsection.scrollEndTimer); tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100); });

Löschen Sie beim Scrollen durch die Abschnitte das Abschnitts-Timeout, sofern vorhanden. und starte eine neue. Löschen Sie das Zeitlimit nicht, und nach einer Ruhepause 100 ms ausgelöst. Wenn sie ausgelöst wird, rufen Sie eine Funktion auf, die versucht, wo der Nutzer aufgehört hat.

const determineActiveTabSection = () => {
  const i = tabsection.scrollLeft / tabsection.clientWidth;
  const matchingNavItem = tabnavitems[i];

  matchingNavItem && setActiveTab(matchingNavItem);
};

Unter der Annahme, dass die Schriftrolle angedockt ist, wird die aktuelle Scrollposition von der Breite geteilt. des Bildlaufbereichs sollte eine Ganzzahl und keine Dezimalzahl sein. Dann versuche ich, über diesen berechneten Index ein Navitem aus unserem Cache abrufen sende ich die Übereinstimmung zum Aktivieren.

const setActiveTab = tabbtn => {
  tabnav
    .querySelector(':scope a[active]')
    .removeAttribute('active');

  tabbtn.setAttribute('active', '');
  tabbtn.scrollIntoView();
};

Das Festlegen des aktiven Tabs beginnt mit dem Löschen aller aktuell aktiven Tabs und das eingehende Navigationselement das aktive Statusattribut. Der Aufruf von scrollIntoView() eine unterhaltsame Interaktion mit CSS ist.

.scroll-snap-x {
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

Im CSS-Dienstprogramm „Horizontal Scroll Snap“ verschachtelt eine Medienabfrage smooth beim Scrollen, wenn der Nutzer bewegungstolerant ist. JavaScript kann frei um Elemente sichtbar zu machen, und CSS kann die UX deklarativ verwalten. Ziemlich entzückende kleine Matches, die manchmal passen.

Fazit

Jetzt, da du weißt, wie ich das gemacht habe, wie würdest du es tun?! Das macht Spaß Komponentenarchitektur. Wer erstellt die erste Version mit Plätzen bevorzugten Framework? 🙂

Lassen Sie uns unsere Herangehensweisen diversifizieren und alle Möglichkeiten kennenlernen, wie wir das Web entwickeln können. Glitch erstellen, Tweet an mich senden und füge sie den Community-Remixen hinzu. weiter unten.

Community-Remixe

• @devnook, @rob_dodson und @DasSurma mit Webkomponenten: Artikel.
• @jhvanderschee mit Schaltflächen: Codepen