Scrolling Container: Saml mønstrene

Saml mønstrene fra denne session og løs GitHub-opgaven scrolling-container i forløbets opgaverepo. Det er en Astro-opgave, hvor du samler custom properties, max(), scroll snap og custom commands i en sammenhængende løsning. Brug siden som forklaring og reference, mens du arbejder i opgavens Astro-projekt.

En scroller der flugter med indholdet

I temaopgaven kan en sektion gå fra kant til kant, mens overskrift og det første kort skal flugte med sidens centrerede indhold. En fælles custom property holder indholdsbredden samlet ét sted:

:root {
  --content-width: 75rem;
}

main {
  display: grid;
  grid-template-columns:
    minmax(1rem, 1fr)
    minmax(0, var(--content-width))
    minmax(1rem, 1fr);
}

main > * { grid-column: 2; }
main > .full { grid-column: 1 / -1; }

.scroller {
  --gutter: max(1rem, 50% - var(--content-width) / 2);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}

På en bred flade beregnes luften som halvdelen af den overskydende bredde. På en smal flade sikrer max() mindst 1rem. Her forudsættes, at scrolleren fylder det samme overordnede område som sidens grid. Procenten følger dens containing block, ikke automatisk viewporten.

padding-inline giver fysisk luft, mens scroll-padding-inline angiver indrykningen til snap-området. De kan bruge samme værdi, så et kort, der snapper til start, flugter med indholdet.

Du har mødt den enklere variant med et banner i math og layout. Her kombineres beregningen med scroll og betjening. Se også web.dev: Padding management.

Saml teknikkerne i opgaven

Arbejd med scrolling-container i opgavens Astro-projekt i følgende rækkefølge:

1. Byg en række af kort, der kan scrolles uden knapper.
2. Tilføj snap-punkter, og vurder start eller center i forhold til designet.
3. Lad rækken og dens snap-område flugte med sideindholdet via den fælles gutter.
4. Tilføj forrige/næste med custom commands og værdier for retning.
5. Opdatér knappernes disabled-tilstand ved start og slut samt ved ændret størrelse.

Brug scroll snap og custom commands som reference til delene. Test med få og mange kort, en smal og en bred flade og længere indhold. Alle kort skal kunne nås, også når der ikke er nok indhold til at scrolle.