DEV Community

Giandomenico Pagliara
Giandomenico Pagliara

Posted on • Updated on

Miglior UX con Scroll-padding-Top

Introduzione

Questa proprietà definisce un offset per la parte superiore dell'area di visualizzazione dello scrollport, o in altre parole, permetterà alla barra di navigazione di non coprire il contenuto quando premerete un link che vi farà scorrere a una sezione specifica della pagina.

Utilizzo

Tutto quello che dovete sapere è che dovete impostare la regola CSS scroll-padding-top all'elemento che dovrà 'scrollare'.

Esempio pratico

Ipotizziamo che la nostra navbar abbia un'altezza fissa di 60px.
Ci basterà aggiungere al container che 'scrollerà' la suddetta regola con valore uguale all'altezza della navbar stessa:

scroll-padding-top: 60px
Enter fullscreen mode Exit fullscreen mode

Nel seguente codepen ci sono due container identici con la stessa barra di navigazione; in quello destro viene usata la regola scroll-padding-top, in quello sinistro no. Cliccate i link delle rispettive barre di navigazione per notare la differenza.

Noterete subito la differenza: nel container destro si legge il titolo selezionato dalla navbar, nel sinistro no. Questo migliorerà l'esperienza utente. Un piccolo dettaglio che farà la differenza.


Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

Linkedin
GitHub

Top comments (0)