Набор 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 | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 4.0 -webkit- (Partial) | 64.0 (Partial) | 5.1 -webkit- (Partial) | 15.0 -webkit- (Partial) |
Практикуйте свои знания
Какие стили можно использовать для настройки полосы прокрутки в CSS?
Правильный!
Неправильно!