Tworzenie komponentu Karty

Podstawowe omówienie tworzenia komponentu kart podobnego do tych w aplikacjach na iOS i Androida.

Adam Argyle

W tym poście chcę pokazać, jak stworzyć komponent kart internetowych. która jest elastyczna, obsługuje wiele wejść na urządzeniu i działa w różnych przeglądarkach. Zobacz prezentację.

Jeśli wolisz film, oto wersja tego posta w YouTube:

Omówienie

Karty są typowym elementem systemów projektowania, ale mogą przybierać wiele kształtów i formularzami. Najpierw były karty na komputery oparte na elemencie <frame>, a teraz dodaliśmy które animują treści na podstawie właściwości fizycznych. Wszyscy starają się zrobić to samo: oszczędzać miejsce.

Obecnie niezbędnym elementem interfejsu kart jest obszar do nawigacji za pomocą przycisków. która przełącza widoczność treści w ramce wyświetlacza. Wiele różnych obszary treści znajdują się w tej samej przestrzeni, ale są prezentowane warunkowo na podstawie przycisk wybrany w obszarze nawigacyjnym.

Taktyki internetowe

Ogólnie rzecz biorąc, utworzenie tego komponentu było dość proste dzięki kilka ważnych funkcji platformy internetowej:

• scroll-snap-points umożliwia korzystanie z eleganckiego przesuwania i interakcji z klawiaturą odpowiednie pozycje punktu przewijania
• Precyzyjne linki za pomocą haszy adresów URL dla obsługa zakotwiczenia i udostępniania przewijania na stronie obsługiwanego przez przeglądarkę
• Obsługa czytnika ekranu ze znacznikami elementów <a> i id="#hash"
• prefers-reduced-motion, aby włączyć przejścia i błyskawiczne przewijanie na stronie
• Funkcja internetowa w wersji roboczej @scroll-timeline, która dynamicznie podkreśla zmiana koloru wybranej karty

Komponent HTML

Ogólnie chodzi o interfejs: kliknięcie linku i dodanie adresu URL do zagnieżdżonego stanu strony i zobaczysz, że obszar treści zmienia się, gdy przeglądarka przewija stronę pasującego elementu.

Zawiera ona elementy treści strukturalnej: linki i elementy :target. Śr potrzebuje listy linków, w przypadku której świetnie nadaje się <nav>, oraz listy <article> do elementów, do których świetnie nadaje się <section>. Każdy hasz linku będzie odpowiadać sekcji, umożliwiając przeglądarce przewijanie treści przez kotwicę.

Na przykład kliknięcie linku powoduje automatyczne umiejscowienie artykułu :target w Chrome 89, bez JavaScriptu. Użytkownik może następnie przewijać treść artykułu za pomocą urządzenia wejściowego. Zawartość jest bezpłatna, co zaznacza się w znacznikami.

Do porządkowania kart zostały użyte następujące znaczniki:

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

Potrafię nawiązywać połączenia między elementami <a> i <article> za pomocą funkcji Właściwości href i id podobne do tych:

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

Później wypełniłam artykuły mieszanką ilości loremu, a linki o różnej długości i w zestawie tytułów. Mając treść, z którą możemy pracować, układ.

Układy przewijane

W tym komponencie są 3 rodzaje obszarów przewijania:

• Nawigacja (różowy) jest poziomy z możliwością przewijania
• Obszar treści (niebieski) jest ustawiony w poziomie z możliwością przewijania
• Każdy element artykułu (zielony) jest ustawiony pionowo którą można przewijać.

Przewijanie obejmuje 2 różne rodzaje elementów:

1. Okno
   Pole ze zdefiniowanymi wymiarami, w którym występuje wartość overflow stylu właściwości.
2. Przekrojona powierzchnia
   W tym układzie jest to kontener listy: nav linki, artykuły, sekcje i treść artykułów.

Układ <snap-tabs>

Wybrany przeze mnie układ najwyższego poziomu to elastyczny (Flexbox). Ustawiam kierunek na column, więc nagłówek i sekcja są uporządkowane w pionie. To nasz pierwszy i ukrywa wszystko z ukrytym nadmiarem. Nagłówek i wkrótce uwzględnimy nadmiernie przewijanie w poszczególnych strefach.

<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;
  }
}

Wróćmy do kolorowego diagramu z 3 przewijaniami:

• <header> jest teraz gotowy, by zostać (różowym) kontener przewijania.
• <section> jest gotowy do roli (niebieskiego) przewijania kontenera.

Ramki wyróżnione poniżej VisBug pomaga nam zobaczyć okna kontenerów przewijania.

Układ kart <header>

Następny układ jest niemal taki sam: używam elastycznego układu do tworzenia kolejności w pionie.

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

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

Element .snap-indicator powinien podróżować w poziomie z grupą linków. ten układ nagłówka pomaga ustawić ten kontekst. Nie ma tu żadnych elementów pozycjonowanych bezwzględnie.

Następne style przewijania. Okazuje się, że możemy współdzielić style przewijania między 2 poziomymi obszarami przewijania (nagłówkiem i sekcją), więc zajęcia: .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;
    }
  }
}

Każdy element musi być umieszczony na osi X, a także zawierać elementy, które nie powodują przewinięcia w celu przewinięcia paski przewijania w przypadku urządzeń dotykowych, a w ostatnim – do blokowania treści. a także kilka obszarów prezentacji. Kolejność kart klawiatury jest dostępna. Przewodnik po interakcjach w naturalny sposób. Kontenery z przewijaniem przewijania również mają ładny styl karuzeli interakcji z klawiaturą.

Układ nagłówka karty <nav>

Linki nawigacyjne muszą być rozmieszczone w pionie w linii, bez podziałów wierszy. na środku, więc każdy element linku powinien zostać przyciągnięty do kontenera przewijania. Swift z usług porównywania cen na rok 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;
  }
}

Każdy link ma swoje style i rozmiary, więc w układzie nawigacyjnym trzeba określić tylko kierunku i przepływem. Unikalne szerokości elementów nawigacyjnych umożliwiają przejście między kartami to zabawa, bo wskaźnik dostosowuje swoją szerokość do nowego elementu docelowego. W zależności od liczby zawiera elementy, przeglądarka wyrenderuje pasek przewijania.

Układ kart <section>

Ta sekcja jest elementem elastycznym i musi być głównym konsumentem przestrzeni. it musi też utworzyć kolumny, w których artykuły zostaną umieszczone. Znowu sprawnie Pracuj nad CSS 2021. block-size: 100% rozciąga ten element, aby wypełnić jak największego elementu nadrzędnego, to dla własnego układu tworzy serię kolumny o szerokości 100% szerokości elementu nadrzędnego. Procenty sprawdzają się tutaj bo w elemencie nadrzędnym napisaliśmy silne ograniczenia.

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

  section {
  block-size: 100%;

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

To tak, jakby można było powiedzieć „rozwiń jak najbardziej w pionie, napychająco”. (pamiętaj nagłówek ustawiony na flex-shrink: 0: jest to zabezpieczenie przed wysunięcie po rozwinięciu), które ustawia wysokość wiersza dla zestawu kolumn o pełnej wysokości. Styl auto-flow informuje siatkę, aby zawsze umieszczać dzieci w poziomie bez zawijania wierszy, dokładnie tak, jak chcemy; , aby wyjść poza okno nadrzędne.

Czasami trudno mi o to wszystko zawinąć! Ten element sekcji jest ale też stworzył zestaw pudełek. Mam nadzieję, że materiały wizualne wyjaśnienia są pomocne.

Układ kart <article>

Użytkownik powinien mieć możliwość przewijania treści artykułu, a paski przewijania powinny wyświetlają się tylko wtedy, gdy jest nadmiar. Elementy artykułu są uporządkowane pozycji. Są jednocześnie elementem nadrzędnym wobec przewijania i elementem podrzędnym przewijania. przeglądarka naprawdę radzi sobie z trudnymi interakcjami z dotykiem, myszą i klawiaturą dla naszej firmy.

<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;
}

Chcę, żeby artykuły były przyciągane do nadrzędnego paska przewijania. naprawdę lubię jak elementy linków nawigacyjnych i elementów artykułu są przyciągane do elementu wewnętrznego odpowiednich kontenerów do przewijania. Wygląda i sprawia wrażenie harmonijnej relacji.

Artykuł jest elementem podrzędnym siatki, a jego rozmiar jest z góry ustalany na podstawie widocznego obszaru chcemy zapewnić wygodę korzystania z przewijania. To oznacza, że nie potrzebuję wysokości ani szerokości stylów, muszę tylko zdefiniować, jak ma się wychodzić. Ustawiam overflow-y na auto, a potem przechwytywać interakcje podczas przewijania za pomocą przydatnej funkcji usłudze.

Podsumowanie 3 obszarów przewijania

W ustawieniach systemu poniżej wybrałem opcję „Zawsze pokazuj paski przewijania”. Myślę, że jest podwójnie ważne, by układ działał z tym ustawieniem, bo zajmę się układem i administracją przewijania.

Sądzę, że rynienka paska przewijania w tym komponencie pomaga wyraźnie wskazać, obsługiwanych obszarach, kierunku i sposobie interakcji i integrację społeczną. Zastanów się, jak każda z tych ramek przewijanych również jest elastyczny lub elementów nadrzędnych siatki.

Narzędzia deweloperskie mogą nam pomóc to zwizualizować:

Układy przewijania są gotowe: przyciąganie, z możliwością precyzyjnych linków i klawiatura i łatwo dostępnych rozwiązań. Solidna podstawa do ulepszenia UX, stylu i przyjemności.

Wyróżniona funkcja

Dzieci z przyciągniętym przewinięciem pozostają w zablokowanej pozycji podczas zmiany rozmiaru. Oznacza to, że JavaScript nie musi pokazywać żadnych elementów podczas obrotu urządzenia ani przeglądarki. zmienić rozmiar. Wypróbuj w Narzędziach deweloperskich w Chromium na urządzeniu Tryb według wybierz tryb inny niż Elastyczna, a następnie zmień rozmiar ramki urządzenia. Zauważ, że element pozostaje widoczny i blokowany wraz z zawartością. To było ponieważ Chromium zaktualizował swoją implementację, by była zgodna ze specyfikacją. Oto posta na blogu na ten temat.

Animacja

Celem animacji jest wyraźne powiązanie interakcji z interfejsem opinie. Pomaga to użytkownikowi przejść do płynnego odkrywania wszystkich treści. Dodam ruch odpowiednio dobrany warunkowo. Użytkownicy mogą teraz określić swój ruch ustawień w systemie operacyjnym, i bardzo podoba mi się odpowiadanie na ich preferencje w moich interfejsach.

Połączę podkreślenie karty z pozycją przewijania artykułu. Przyciąganie nie jest tylko ładne wyrównanie, a także zakotwiczenie początku i końca animacji. Dzięki temu element <nav>, który działa jak minimapa połączona z treścią. Będziemy sprawdzać preferencje użytkownika dotyczące ruchu zarówno w kodzie CSS, jak i JS. Jest kilka ciekawych miejsc, o których warto pamiętać!

Zachowanie podczas przewijania

Istnieje możliwość poprawy działania elementów :target i związanych z ruchem element.scrollIntoView() Domyślnie jest to tryb błyskawiczny. Przeglądarka po prostu ustawia do miejsca przewijania. A jeśli chcemy przejść do tej pozycji przewijania, zamiast mrugać?

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

Wprowadzamy tu ruch, którego użytkownik nie kontroluje (takie jak przewijanie), stosujemy ten styl tylko wtedy, gdy użytkownik nie ma preferencji w systemie operacyjnym związanym ze zmniejszonym ruchem. W ten sposób wprowadziliśmy przewijanie ruch w internecie dla osób, które się z tym zgadzają.

Wskaźnik kart

Animacja pomaga powiązać wskaźnik ze stanem. treści. Zdecydowałam się na przenikanie stylów border-bottom dla użytkowników dla osób, które preferują ograniczenie ruchu oraz możliwość przewijania przesuwanych palcem z linkiem do przewijania oraz animacji zanikania kolorów dla użytkowników, którzy nie radzą sobie z ruchem.

W Narzędziach deweloperskich w Chromium mogę zmienić to ustawienie i zademonstrować 2 różne style przejścia. Tworzenie tego elementu to dla mnie świetna zabawa.

@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;
  }
}

Ukrywam przycisk .snap-indicator, gdy użytkownik preferuje ograniczenie ruchu, ponieważ nie lubię i go potrzebują. Następnie zastępuję je stylami border-block-end i elementem transition Przy interakcji z kartami zwróć uwagę na to, że aktywny element nawigacji nie ma tylko wyróżnienie marki, ale kolor tekstu również jest ciemniejszy. aktywny element ma wyższy kontrast kolorów tekstu i jasny akcent podświetlony.

Kilka dodatkowych linijek kodu CSS sprawi, że użytkownik poczuje się zauważony (i to uwzględniamy preferencje dotyczące ruchu). Uwielbiam to.

@scroll-timeline

W sekcji powyżej pokazałem, jak radzić sobie ze zmniejszonym przenikaniem ruchu. style. W tej sekcji pokażę, jak połączyć obszar przewijania. Następnym razem mamy trochę ciekawych rzeczy eksperymentalnych. Mam nadzieję, że tak samo podekscytowany jak ja.

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

Najpierw sprawdzam preferencje użytkownika dotyczące ruchu w JavaScripcie. Jeśli wynikiem funkcji to jest false. Oznacza to, że użytkownik preferuje mniej ruchu, więc nie będziemy wyświetlać efekt ruchu polegający na połączeniu przewijania.

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

W momencie pisania tego artykułu przeglądarka obsługiwała @scroll-timeline to brak. To wersja robocza specyfikacji tylko z eksperymentalnych implementacji. Zawiera jednak kod polyfill, którego używam wersji demonstracyjnej.

ScrollTimeline

Choć CSS i JavaScript mogą tworzyć osie czasu przewijania, JavaScriptu umożliwiającego wykorzystanie w animacji pomiarów aktywnych elementów.

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

Chcę, aby jedna rzecz podążała za pozycją przewijania innej. Utwórz więc atrybut ScrollTimeline Określam sterownik linku przewijania – scrollSource. Normalnie animacja w internecie wyświetla się w globalnym odstępie czasu, ale niestandardowy element sectionScrollTimeline w pamięci, mogę to wszystko zmienić.

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

Zanim przejdziemy do klatek kluczowych animacji, warto wskaż obserwatora przewijania, tabindicator, będzie animowany na podstawie na niestandardowej osi czasu, przewijaniu sekcji. To kończy proces łączenia, ale jest brakuje ostatecznego składnika, stanowych punktów pośrednich między animacją, czyli tzw. klatek kluczowych.

Dynamiczne klatki kluczowe

Istnieje naprawdę zaawansowany, czysty i deklaratywny sposób animacji CSS @scroll-timeline, ale wybrana przeze mnie animacja była zbyt dynamiczna. Nie ma jest sposób przejścia między szerokością elementu auto. Nie ma możliwości dynamicznego tworzenia liczbę klatek kluczowych na podstawie długości elementów podrzędnych.

JavaScript wie jednak, skąd uzyskuje te informacje, więc będziemy dla dzieci i pobierać obliczone wartości w czasie działania:

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

W przypadku każdego elementu tabnavitem zniszcz pozycję offsetLeft i zwracaj ciąg znaków , który używa jej jako wartości translateX. W ten sposób zostaną utworzone 4 klatki kluczowe przekształcenia. animację. To samo dotyczy szerokości – każde z nich otrzymuje pytanie o szerokość dynamiczną a następnie jest używana jako wartość klatki kluczowej.

Oto przykładowe dane wyjściowe przygotowane na podstawie moich czcionek i preferencji przeglądarki:

Klatki kluczowe TłumaczX:

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

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

Szerokość klatek kluczowych:

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

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

Podsumowując: wskaźnik karty będzie się teraz wyświetlać w 4 klatkach kluczowych. w zależności od położenia przewijania suwaka sekcji. Punkty przyciągania tworzą wyraźne rozgraniczenie między klatkami kluczowymi i dodają i synchronizacja animacji.

Użytkownik uruchamia animację, widząc jej szerokość i zmiana pozycji wskaźnika z jednej sekcji do kolejnej, śledzenie z przewijaniem.

Może cię nie zauważyliście, ale jestem bardzo dumna z przejścia na kolor zaznaczony element nawigacji zostanie zaznaczony.

Odznaczony jaśniejszy kolor szary wydaje się jeszcze bardziej odsunięty, gdy podświetlony element ma większy kontrast. Często zmienia się kolor tekstu, np. po najechaniu kursorem myszy. a po wybraniu, przejścia tego koloru przy przewijaniu. zsynchronizowany ze wskaźnikiem podkreślenia.

Oto jak to działa:

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

Każdy link nawigacyjny na karcie wymaga nowej animacji koloru, śledzącej to samo przewijanie oś czasu. Używam tej samej osi czasu co wcześniej: od jego zadaniem jest generowanie tykania podczas przewijania, możemy go używać animacji. Tak jak poprzednio utworzę 4 klatki kluczowe w pętli, po czym zwracam kolorów.

[...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)",
]

klatka kluczowa w kolorze var(--text-active-color) wyróżnia połączenie, a ma standardowy kolor tekstu. Zagnieżdżona pętla sprawia, że ponieważ pętla zewnętrzna to element nawigacji, a pętla wewnętrzna to osobiste klatki kluczowe elementu nawigacyjnego. Sprawdzam, czy zewnętrzny element pętli jest taki sam jak z wewnętrznym pętlą, aby dowiedzieć się, kiedy zostanie wybrany.

Bardzo mi się to podobało. Ogromnie.

Jeszcze więcej ulepszeń JavaScriptu

Przypominamy, że podstawowe informacje o tym, co tu pokazuję, działają bez JavaScriptu. Teraz zobaczmy, jak można go ulepszyć, i dostępności informacji.

Precyzyjne linki

Precyzyjne linki to termin związany z urządzeniami mobilnymi, ale myślę, że celem takich linków jest z kartami, za pomocą których możesz udostępnić URL bezpośrednio do zawartości karty. przeglądarka przejdzie na stronę do identyfikatora zgodnego z haszem adresu URL. Znalazłem ten moduł obsługi onload działa na różnych platformach.

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

Przewijanie i zakończenie synchronizacji

Nasi użytkownicy nie zawsze klikają ani nie używają klawiatury, swobodne przewijanie. Gdy zatrzymuje się przewijanie sekcji niezależnie od miejsca jej wyświetlenia, musi znajdować się na górnym pasku nawigacyjnym.

Oto jak czekam na zakończenie przewijania: js tabsection.addEventListener('scroll', () => { clearTimeout(tabsection.scrollEndTimer); tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100); });

Za każdym razem, gdy sekcje są przewijane, w razie potrzeby usuń limit czasu sekcji. i rozpocznij nową. Gdy sekcje przestaną być przewijane, nie usuwaj limitu czasu. i odpalić po 100 ms od spoczynku. Po uruchomieniu wywołaj funkcję, która znajduje na którym użytkownik się zatrzymał.

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

  matchingNavItem && setActiveTab(matchingNavItem);
};

Zakładając, że przewinięcie zostało przyciągnięte, dzielim bieżącą pozycję przewijania od szerokości powinien być liczbą całkowitą, a nie dziesiętną. Następnie próbuję pobierze element nawigacyjny z naszej pamięci podręcznej za pomocą tego obliczonego indeksu, a jeśli znajdzie wysyłam dopasowanie jako aktywne.

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

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

Aby skonfigurować aktywną kartę, należy wyczyścić wszystkie aktywne karty, a następnie aktywny atrybut stanu przychodzącego elementu nawigacyjnego. Rozmowa z numerem scrollIntoView() ciekawe interakcje z CSS, na które warto zwrócić uwagę.

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

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

W pliku CSS narzędzia CSS przyciągającym przewijanie w poziomie zagnieżdżono zapytanie o media, które ma zastosowanie smooth przewijanie, jeśli użytkownik toleruje ruch. JavaScript może swobodnie aby wyświetlić elementy, a CSS może zarządzać UX deklaratywnie. Te fajne, małe dopasowanie.

Podsumowanie

Skoro już wiesz, jak to robię, jak Ty?! To będzie dobra zabawa architekturę komponentów. Kto stworzy pierwszą wersję z miejscami ulubiony schemat? 🙂

Stosujmy różne podejścia i poznajmy sposoby budowania obecności w internecie. Utwórz glitch, dodaj tweeta a ja dodam ją do remiksów na karcie Społeczność. sekcji poniżej.

Remiksy utworzone przez społeczność

• @devnook, @rob_dodson i @DasSurma z komponentami sieciowymi: artykuł.
• @jhvanderschee z przyciskami: Codepen.