CSS - Barre di scorrimento

Potrebbe esserci un caso in cui il contenuto di un elemento potrebbe essere maggiore della quantità di spazio allocato ad esso. Ad esempio, determinate proprietà di larghezza e altezza non consentono spazio sufficiente per accogliere il contenuto dell'elemento.

CSS fornisce una proprietà chiamata overflow che dice al browser cosa fare se il contenuto del box è più grande del box stesso. Questa proprietà può assumere uno dei seguenti valori:

Sr.No. Valore e descrizione
1

visible

Consente al contenuto di superare i bordi del suo elemento contenitore.
2

hidden

Il contenuto dell'elemento nidificato viene semplicemente tagliato al bordo dell'elemento contenitore e non sono visibili barre di scorrimento.
3

scroll

La dimensione dell'elemento contenitore non cambia, ma vengono aggiunte le barre di scorrimento per consentire all'utente di scorrere per vedere il contenuto.
4

auto

Lo scopo è lo stesso dello scorrimento, ma la barra di scorrimento verrà visualizzata solo se il contenuto trabocca.

Ecco un esempio:

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
   </body>
</html>

Produrrà il seguente risultato: