scroll-behavior: smooth
Abiliti lo scorrimento fluido per i link ad ancora e gli scorrimenti programmatici con scroll-behavior.
scroll-behavior: smooth è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 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'è scroll-behavior?
scroll-behavior controlla se lo scorrimento attivato dalla navigazione (link ad ancoraggio, JavaScript scrollTo()) deve essere animato in modo fluido oppure eseguito con un salto immediato.
scroll-behavior: smooth
Impostare scroll-behavior: smooth sull'elemento html o body rende fluida l'animazione della navigazione tramite i link ad ancoraggio della pagina:
<p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>Immediato o fluido
Valori:
auto(predefinito): salto immediatosmooth: scorrimento animato verso la destinazione
Navigazione tramite link ad ancoraggio
Con lo scorrimento fluido attivato, facendo clic su un link come <a href="#contact"> si scorre gradualmente fino all'elemento con id="contact", invece di raggiungerlo con un salto immediato.
<nav>
<a href="#about">About</a>
<a href="#work">Work</a>
<a href="#contact">Contact</a>
</nav>
<section id="about"><h3>About</h3></section>
<section id="work"><h3>Work</h3></section>
<section id="contact"><h3>Contact</h3></section>scrollTo() di JavaScript con animazione fluida
Passi behavior: "smooth" ai metodi JavaScript per lo scorrimento animato:
<pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });
document.querySelector('#section').scrollIntoView({
behavior: 'smooth',
block: 'start'
});</pre>Interazione con prefers-reduced-motion
Lo scorrimento fluido può causare cinetosi. Lo disattivi sempre per gli utenti che preferiscono ridurre il movimento:
<p>Respects <code>prefers-reduced-motion</code>.</p>scroll-behavior sui contenitori
Applichi la proprietà a qualsiasi contenitore scorrevole, non solo alla pagina:
<div class="tabs-panel">
<div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
</div>Limitazioni
CSS scroll-behavior non consente di controllare la durata dello scorrimento o la funzione di easing. Per un controllo preciso dell'animazione, usi la Web Animations API di JavaScript o librerie come GSAP con i relativi plugin per lo scorrimento.
scroll-padding-top per le intestazioni fisse
Quando un'intestazione fissa copre le destinazioni degli ancoraggi, scroll-padding-top aggiunge uno spazio di offset in modo che la destinazione non rimanga nascosta dietro l'intestazione:
<p>Anchor targets offset by fixed header height.</p>scroll-margin e scroll-padding
scroll-margin aggiunge l'offset direttamente all'elemento di destinazione; scroll-padding aggiunge l'offset al contenitore di scorrimento. Entrambe le proprietà risolvono il problema delle intestazioni fisse:
<div class="section">Section content</div>Nota sull'accessibilità
Lo scorrimento fluido è un miglioramento dell'esperienza utente. Verifichi sempre che la navigazione tramite ancoraggi funzioni anche senza di esso: non faccia affidamento sul comportamento di scorrimento fluido per le funzionalità, ma lo usi solo come rifinitura visiva.
Verifica rapida
Come si assicura che l'animazione dello scorrimento fluido sia disattivata per gli utenti sensibili al movimento vestibolare?
Riepilogo
scroll-behavior: smooth su html abilita lo scorrimento animato e fluido per i link ad ancoraggio e i metodi JavaScript per lo scorrimento. Usi scroll-padding-top per mantenere le destinazioni dello scorrimento distanti dalle intestazioni fisse. Disattivi sempre lo scorrimento fluido all'interno di una media query prefers-reduced-motion: reduce per garantire l'accessibilità.
Domande Frequenti
La lezione «scroll-behavior: smooth» è gratuita?
Sì — il testo completo di «scroll-behavior: smooth» è 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-behavior: smooth»?
Abiliti lo scorrimento fluido per i link ad ancora e gli scorrimenti programmatici con scroll-behavior. 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 2 di 4.
Quanto tempo richiede la lezione «scroll-behavior: smooth»?
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