Учебники

CSS — полосы прокрутки

Сентябрь 21, 2018

Возможен случай, когда содержимое элемента может быть больше, чем выделенное ему пространство. Например, данные свойства width и height не дают достаточно места для размещения содержимого элемента.

CSS предоставляет свойство overflow, которое сообщает браузеру, что делать, если содержимое блока больше, чем сам блок. Это свойство может принимать одно из следующих значений:

Sr.No. Значение и описание
1

видимый

Позволяет содержимому переполнять границы содержащего его элемента.

2

скрытый

Содержимое вложенного элемента просто обрезается на границе содержащего элемента, и полосы прокрутки не видны.

3

свиток

Размер содержащего элемента не изменяется, но полосы прокрутки добавляются, чтобы позволить пользователю прокручивать, чтобы увидеть содержимое.

4

авто

Назначение такое же, как прокрутка, но полоса прокрутки будет отображаться только в том случае, если содержимое переполняется.

видимый

Позволяет содержимому переполнять границы содержащего его элемента.

скрытый

Содержимое вложенного элемента просто обрезается на границе содержащего элемента, и полосы прокрутки не видны.

свиток

Размер содержащего элемента не изменяется, но полосы прокрутки добавляются, чтобы позволить пользователю прокручивать, чтобы увидеть содержимое.

авто

Назначение такое же, как прокрутка, но полоса прокрутки будет отображаться только в том случае, если содержимое переполняется.

Вот пример —

Live Demo

<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>

Это даст следующий результат —

46
Share: