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 -