CSS - paski przewijania
Może się zdarzyć, że zawartość elementu może być większa niż ilość przydzielonego mu miejsca. Na przykład określone właściwości szerokości i wysokości nie zapewniają wystarczającej ilości miejsca na umieszczenie zawartości elementu.
CSS udostępnia właściwość o nazwie przepełnienie, która mówi przeglądarce, co zrobić, jeśli zawartość pudełka jest większa niż samo pudełko. Ta właściwość może przyjąć jedną z następujących wartości -
| Sr.No. | Wartość i opis |
|---|---|
| 1 | visible Pozwala zawartości na przekroczenie granic elementu zawierającego. |
| 2 | hidden Zawartość zagnieżdżonego elementu jest po prostu odcinana na granicy elementu zawierającego i żadne paski przewijania nie są widoczne. |
| 3 | scroll Rozmiar elementu zawierającego nie zmienia się, ale paski przewijania są dodawane, aby umożliwić użytkownikowi przewijanie w celu wyświetlenia zawartości. |
| 4 | auto Cel jest taki sam jak scroll, ale pasek przewijania będzie wyświetlany tylko wtedy, gdy zawartość się przepełni. |
Oto przykład -
<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>To da następujący wynik -