CSS свойство scrollbar

Набор scrollbar (полоса прокрутки) - это способ добавления стиля , что дает веб-дизайнерам возможность создать темы оформления для обычных скроллбаров браузера.

Свойство вставляется после вендорного префикса -webkit.

Набор свойств -webkit-scrollbar содержит семь разных псевдоэлементов, которые вместе составляют полный скроллбар элемента пользовательского интерфейса. Речь идет о следующих псевдоэлементах:

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-button
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-track-piece
  • ::-webkit-scrollbar-thumb
  • ::-webkit-scrollbar-corner
  • ::-webkit-resizer
Значение по умолчанию auto
Применяется К блокам с прокруткой.
Наследуется Да
Анимируемое Discrete.
Версия -
DOM Syntax -

Синтаксис

scrollbar: ::-webkit-scrollbar-button | ::-webkit-scrollbar-track | ::-webkit-scrollbar-track-piece | ::-webkit-scrollbar-thumb | ::-webkit-scrollbar-corner | ::-webkit-resizer

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      html {
      height: 100%;
      overflow: hidden;
      }
      body {
      height: 100%;
      background: #eee;
      overflow: scroll;
      width: 85%;
      max-width: 600px;
      margin: 0 auto;
      padding: 3em;
      font: 100%/1.4 lora, serif;
      border: 1px solid #666;
      }
      p {
      margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar {
      width: 1em;
      } 
      body::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      }
      body::-webkit-scrollbar-thumb {
      background-color: #666;
      outline: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства scrollbar</h2>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </div>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </div>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </div>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </div>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </div>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </div>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </div>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </div>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </div>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </div>
    </div>
  </body>
</html>

Значения

Значение Описание
::-webkit-scrollbar-button Кнопки полосы прокрутки.
::-webkit-scrollbar-track Указатель для прокрутки с помощью мыши.
::-webkit-scrollbar-track-piece Область перемещения ползунка.
::-webkit-scrollbar-thumb Ползунок прокрутки.
::-webkit-scrollbar-corner Нижний уголок, где пересекаются горизонтальные и вертикальные полосы прокрутки.
::-webkit-resizer Перемещаемый указатель для изменения размера, который появляется в нижнем углу некоторых элементов.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
4.0 -webkit- (Partial) 64.0 (Partial) 5.1 -webkit- (Partial) 15.0 -webkit- (Partial)

Практикуйте свои знания

Какие стили можно использовать для настройки полосы прокрутки в CSS?
Считаете ли это полезным?