Scorrimento di pagina fluido con scroll-behavior

Lo scorrimento verticale di pagina è sempre stato tipico della fruizione di un testo sul web. Successivamente la linearizzazione dei contenuti, dovuta all’avvento preponderante dei dispositivi mobili, ha accentuato ulteriormente questa natura verticale. La navigazione interna può tuttavia risultare scomoda, specie in presenza di testi sufficientemente lunghi. Per questo motivo non mancano degli accorgimenti che aiutano ad orientarsi spostandosi più agevolmente da un punto all’altro all’interno di una stessa pagina.

Ausili alla navigazione interna

Il pulsante Torna su o scroll to top per tornare a inizio pagina, ad esempio, è di largo uso già da tempo. Gli sticky header fanno in modo che la struttura del menu sia sempre visibile anche quando si scorre verso il basso. La presenza di un sommario, denominato anche table of contents o semplicemente TOC (ne trovate un’implementazione in questa pagina nella parte sinistra della pagina in un ambiente desktop, in alto a destra su dispositivi mobili), schematizza i temi trattati ed agevola lo spostamento tra sezioni ben definite.

La proprietà scroll-behavior

Un uso sempre più intensivo delle animazioni nel mondo dell’UI design, d’altra parte, ha reso consueto enfatizzare con un’animazione lo spostamento da un punto all’altro di una stessa pagina. Per lungo tempo questo effetto è stato possibile solo attraverso l’uso di librerie JavaScript, ma, ormai, la proprietà scroll-behavior rende più semplice ed immediato avere lo stesso risultato con i soli CSS.

Il codice seguente, ad esempio, aggiunge un effetto di scorrimento fluido all’intero documento.

I metodi JavaScript

In concomitanza con la proprietà scroll-behavior i metodi JavaScript Window.scroll(), Window.scrollBy(), Window.scrollTo(), Element.scroll(), Element.scrollBy() e Element.scrollTo() supportano nativamente lo scorrimento fluido (smooth scrolling).

Sarà sufficiente passare come parametro un oggetto ScrollToOptions con la proprietà behavior: 'smooth'.

Lo scorrimento fluido nativo è una funzionalità molto utile e il supporto è ormai completo. Se il pieno supporto di browser datati è importante per il proprio progetto si potrebbe valutare l’utilizzo del polyfill Smooth Scroll di Dustan Kasten. Provate a visitare questa pagina con IE11 per vederlo all’opera.