CSS Academy · Lektion

scroll-snap-type och scroll-snap-align

Skapa karusell- och sidbläddringsupplevelser med CSS-egenskaper för scroll snap.

Lektion 3 av 413 steg

scroll-snap-type och scroll-snap-align är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad är CSS Scroll Snap?

CSS Scroll Snap gör det möjligt för rullningsbara behållare att ”fästa” vid specifika positioner efter rullning, vilket skapar styrda sidväxlings- och karusellbeteenden utan JavaScript.

scroll-snap-type på behållaren

Aktivera snap på den rullningsbara behållaren:

  <div class="carousel">
    <div class="item">1</div><div class="item">2</div><div class="item">3</div>
  </div>

Värden för scroll-snap-type

Två delar:

Axel: x, y eller both
Strikthet: mandatory (fäster alltid) eller proximity (fäster när den är nära en snap-punkt)

  <div class="paged">Paged container</div>
  <div class="freeform">Freeform container</div>

scroll-snap-align på objekt

Definiera var varje underordnat element fäster i behållaren:

  <div class="carousel-demo">
    <div class="carousel-item">1</div><div class="carousel-item">2</div>
  </div>

Snap för helskärmssidor

En layout med vertikalt sidväxlande sektioner i helskärm:

  <div class="sections">
    <div class="section">Section 1</div><div class="section">Section 2</div>
  </div>

Horisontell karusell med snap

En horisontell kortkarusell med snap:

  <div class="carousel">
    <div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
  </div>

scroll-snap-stop

scroll-snap-stop: always förhindrar att snabb rullning hoppar över snap-punkter. Användaren kan inte hoppa över mer än ett objekt per rullningsgest.

  <div class="slider">
    <div class="slide">1</div><div class="slide">2</div>
  </div>

scroll-snap-margin och scroll-padding

Förskjut snap-positionen på objekt (scroll-margin) eller på behållaren (scroll-padding):

  <div class="carousel">Carousel container</div>

overscroll-behavior

overscroll-behavior: contain förhindrar rullningskedjning — när behållaren når sin rullningsgräns börjar sidan inte rulla också:

  <div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

Tillgänghetsaspekter

Snap-karuseller ska fortfarande kunna navigeras med tangentbordet. Piltangenterna ska flytta mellan snap-punkter. Lägg till ARIA-roller och etiketter för karusellen. Programmatisk rullning via JavaScript ska respektera samma snap-punkter.

CSS- kontra JS-karuseller

CSS scroll snap hanterar de flesta grundläggande karusellbehoven utan JavaScript: snap-to, dolda rullningslister och justering med utfyllnad. Använd ett JS-bibliotek när du behöver punktindikatorer, föregående-/nästa-knappar med animerade övergångar eller komplex tillgänglighetshantering.

Snabbtest

Vilket värde för scroll-snap-type säkerställer att behållaren alltid stannar exakt vid en snap-punkt och aldrig däremellan?

Besvara frågan i den interaktiva lektionen

Sammanfattning

CSS Scroll Snap skapar sidväxlings- och karusellbeteenden. Ange scroll-snap-type: x mandatory på behållaren och scroll-snap-align: start på objekten. Använd scroll-snap-stop: always för att förhindra hopp över objekt. Kombinera med overscroll-behavior: contain för att förhindra rullningskedjning. Dölj rullningslister med scrollbar-width: none för ett rent visuellt uttryck.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”scroll-snap-type och scroll-snap-align” gratis?

Ja – hela texten till ”scroll-snap-type och scroll-snap-align” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”scroll-snap-type och scroll-snap-align”?

Skapa karusell- och sidbläddringsupplevelser med CSS-egenskaper för scroll snap. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”scroll-snap-type och scroll-snap-align”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

overflow: hidden scroll auto clip
scroll-behavior: smooth
scroll-snap-type och scroll-snap-align
Styla rullningslisten med ::-webkit-scrollbar

← Tillbaka till CSS Academy