Come fare per ..

Impostare la barra di scorrimento nei DIV

Un tempo si utilizzavano i frame o gli iframe per gestire contenuti racchiusi in un'area definita della pagina, ma i loro problemi di eleganza e visibilità nella pagina sono stati superati con un migliore utilizzo dei tag DIV, il CSS si dimostra un valido alleato per offrire una soluzione comoda e potente per ottenere tutti i benefici dei frame senza i loro problemi.

Supponiamo di avere un testo piuttosto lungo all'interno di un box DIV, e di volerlo tenere contenuto all'interno di una determinata area della pagina per non sottrarre spazio ad altri elementi.
Il nostro DIV avrà quindi una dimensione massima ben definita.
Se il testo è più lungo dell'area a sua disposizione, il comportamento del riquadro può essere gestito tramite l'attributo overflow da assegnare allo stile del DIV.
L'attributo overflow, che può anche applicarsi alla sola dimensione orizzontale o verticale, nelle sue varianti overflow-x o overflow-y, controlla appunto il comportamento che deve tenere il testo quando supera i limiti fisici del box in cui è contenuto.

I valori che può assumere l'attributo overflow sono 6:
- visible: (predefinito) il testo non viene troncato e viene visualizzato fuori dal box di riferimento
- hidden: il testo in eccesso viene troncato e non viene visualizzato
- scroll: il testo in eccesso viene troncato e viene visualizzata una barra di scorrimento per mostrarlo
- auto: il testo in eccesso viene troncato e viene visualizzata una barra di scorrimento solo se c'è testo in eccesso
- initial: la proprietà viene impostata al suo valore iniziale
- hidden: la proprietà assume lo stesso valore dell'elemento in cui è inserito

Noi utilizzeremo il valore auto sull'elemento DIV cui assegneremo l'ID blocco.

[CSS] #blocco {    width: 180px;    height: 180px;    overflow: auto;    border: 1px solid black; }

[HTML] Il nostro testo lungo<br> <div id="blocco">    Sempre caro mi fu quest'ermo colle,    E questa siepe, che da tanta parte    Dell'ultimo orizzonte il guardo esclude.    Ma sedendo e mirando, interminati    Spazi di là da quella, e sovrumani    Silenzi, e profondissima quiete    Io nel pensier mi fingo; ove per poco    Il cor non si spaura. E come il vento    Odo stormir tra queste piante, io quello    Infinito silenzio a questa voce    Vo comparando: e mi sovvien l'eterno,    E le morte stagioni, e la presente    E viva, e il suon di lei. Così tra questa    Immensità s'annega il pensier mio:    E il naufragar m'è dolce in questo mare. </div>

La presenza dell'attributo height che impone una altezza fissa fa in modo che la barra di scorrimento verticale sia la prima che viene inserita, e la barra orizzontale viene inserita solo se la casella non riesce a contenere la parola più lunga oppure non viene forzato l'attributo overflow-x al valore scroll.
Questo sotto è il risultato ottenuto.

Il nostro testo lungo Sempre caro mi fu quest'ermo colle, E questa siepe, che da tanta parte Dell'ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminati Spazi di là da quella, e sovrumani Silenzi, e profondissima quiete Io nel pensier mi fingo; ove per poco Il cor non si spaura. E come il vento Odo stormir tra queste piante, io quello Infinito silenzio a questa voce Vo comparando: e mi sovvien l'eterno, E le morte stagioni, e la presente E viva, e il suon di lei. Così tra questa Immensità s'annega il pensier mio: E il naufragar m'è dolce in questo mare.