CSS Academy · Lezione

scroll-snap-type e scroll-snap-align

Crei esperienze di scorrimento per caroselli e paginazione con le proprietà CSS scroll snap.

scroll-snap-type e scroll-snap-align è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Che cos'è CSS Scroll Snap?

CSS Scroll Snap consente ai contenitori scorrevoli di effettuare lo "snap" su posizioni specifiche dopo lo scorrimento, creando comportamenti di paginazione e carousel controllati senza JavaScript.

scroll-snap-type sul contenitore

Abiliti lo snap sul contenitore scorrevole:

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

Valori di scroll-snap-type

La proprietà è composta da due parti:

Asse: x, y o both
Rigidità: mandatory (effettua sempre lo snap) o proximity (effettua lo snap quando si trova vicino a un punto di snap)

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

scroll-snap-align sugli elementi

Definisca il punto in cui ogni elemento figlio deve effettuare lo snap all'interno del contenitore:

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

Snap di pagine a schermo intero

Un layout a sezioni a schermo intero con paginazione verticale:

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

Snap per carousel orizzontale

Un carousel orizzontale di card con 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 impedisce allo scorrimento rapido di saltare i punti di snap. L'utente non può avanzare di più di un elemento per gesto di scorrimento.

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

scroll-snap-margin e scroll-padding

Compensi la posizione di snap sugli elementi (scroll-margin) o sul contenitore (scroll-padding):

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

overscroll-behavior

overscroll-behavior: contain impedisce la concatenazione dello scorrimento: quando il contenitore raggiunge il limite di scorrimento, anche la pagina non scorre:

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

Considerazioni sull'accessibilità

I carousel con snap devono essere comunque navigabili tramite tastiera. I tasti freccia devono spostarsi tra i punti di snap. Aggiunga ruoli e label ARIA per il carousel. Lo scorrimento programmatico tramite JavaScript deve rispettare gli stessi punti di snap.

Carousel CSS e JavaScript

CSS scroll snap gestisce la maggior parte delle esigenze di base dei carousel senza JavaScript: snap-to, barra di scorrimento nascosta e allineamento tramite spaziatura interna. Usi una libreria JavaScript quando ha bisogno di indicatori a punti, pulsanti precedente/successivo con transizioni animate o una gestione complessa dell'accessibilità.

Verifica rapida

Quale valore di scroll-snap-type garantisce che il contenitore si fermi sempre esattamente su un punto di snap, mai tra due punti?

Riepilogo

CSS Scroll Snap crea comportamenti di paginazione e carousel. Imposti scroll-snap-type: x mandatory sul contenitore e scroll-snap-align: start sugli elementi. Usi scroll-snap-stop: always per impedire i salti. Lo combini con overscroll-behavior: contain per impedire la concatenazione dello scorrimento. Nasconda le barre di scorrimento con scrollbar-width: none per ottenere un aspetto pulito.

Domande Frequenti

La lezione «scroll-snap-type e scroll-snap-align» è gratuita?

Sì — il testo completo di «scroll-snap-type e scroll-snap-align» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «scroll-snap-type e scroll-snap-align»?

Crei esperienze di scorrimento per caroselli e paginazione con le proprietà CSS scroll snap. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «scroll-snap-type e scroll-snap-align»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

overflow: hidden, scroll, auto, clip
scroll-behavior: smooth
scroll-snap-type e scroll-snap-align
Stile della scrollbar con ::-webkit-scrollbar

← Torna a CSS Academy