Guida - Inserire una barra di scorrimento in HTML

Chi non conosce le famosissime barre di scorrimento, in inglese vengono chiamate scrollbars, in questa guida voglio insegnarvi ad inserirle nelle vostre pagine web, importando semplicemente degli stili CSS all'interno di un blocco di testo: Partiamo con le scrollbar più famose, ovvero quelle verticali, vediamo subito il codice:

<div style="width: 300px; height: 300px"; overflow-y: scroll; border: 2px solid #191970; font-size: 13px;">Barra verticale all'interno di un blocco di testo!</div>

Come è possibile notare in questo codice abbiamo dato ad un blocco di testo uno style, che indica l'utilizzo di fogli di stile direttamente nell'HTML, a cui abbiamo determinato l'altezza e la larghezza, mentre per quanto riguarda la proprietà overflow-y rappresenta lo scorrimento verticale in caso il testo superi le grandezze (larghezza e altezza) stabilite, poi è stato aggiunto un bordo per dare l'idea della grandezza del div, ed è stata ingrandita la grandezza del testo in modo da superare le grandezze stabilite. Mentre il codice per le scrollbars orizzontali è il seguente:

<div style="width: 300px; height: 300px"; overflow-y: scroll; border: 2px solid #191970; font-size: 13px;">Barra verticale all'interno di un blocco di testo!</div>

L'unica caratteristica che cambia rispetto a prima è overflow-x che rappresenta la barra di scorrimento orizzontale in caso il testo superi le grandezze stabilite Mentre per inserirle entrambi, è molto semplice basta utilizzare entrambe le proprietà:

<div style="width: 300px; height: 300px"; overflow-y: scroll; border: 2px solid #191970; font-size: 13px;">Barra verticale all'interno di un blocco di testo!</div>