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: