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
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:
Top comments (0)