Webkit scrollbar thumb css

Кастомизация скроллбара браузеров на движке WebKit

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

Элементы скроллбара

Вы можете управлять отдельными элементами для кастомизации скроллбара:

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

• webkit-scrollbar — Все поле скроллбара.
• webkit-scrollbar-button — Кнопки скрола вверх и вниз (зачастую имеет иконки в виде стрелок).
• webkit-scrollbar-track — Трек поля по которому передвигается ползунок скролла.
• webkit-scrollbar-track-piece — Свободное место на треке (которое не занято ползунком).
• webkit-scrollbar-thumb — Сам ползунок.
• webkit-scrollbar-corner — Угол на скроллбаре, на котором как правило пересекаются вертикальный и горизонтальный скроллбар.
• webkit-resizer — Если ваш скроллбар поддерживает изменение размера поля к которому он прикреплен, можете кастомизировать этот элемент.

Разные состояние скроллбара

Это селекторы псевдоклассов. Их можно применять к различным элементам скроллбара для изменения внешнего вида, когда скроллбар находится в разных состояниях.

:horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive

• horizontal — псевдокласс применяется к любым частям скроллбара, имеющим горизонтальную ориентацию.
• vertical — псевдокласс применяется к любым частям скроллбара, которые имеют вертикальную ориентацию.
• decrement — Псевдокласс декремента применяется к кнопкам и элементами трека скроллбара. Он указывает, будет ли кнопка или элемент трека уменьшать положение вида при использовании (например, вверх по вертикальной полосе прокрутки, влево по горизонтальной полосе прокрутки).
• increment — Псевдокласс инкремента применяется к кнопкам и элементами трека скроллбара. Он указывает, будет ли кнопка или элемент трека увеличивать позицию вида при использовании (например, вниз на вертикальной полосе прокрутки, прямо на горизонтальной полосе прокрутки).
• start — Этот псевдокласс применяется к кнопкам и фрагментам трека. Он сообщает, что объект находится перед ползунком.
• end — Этот псевдокласс применяется к кнопкам и фрагментам трека. Он сообщает, что объект находится после ползунка.
• double-button — Псевдокласс применяется к кнопкам и трекам. Он используется для определения является ли кнопка частью пары кнопок, которые находятся на одном конце скроллбара. Для элементов трека он указывает, примыкает ли элемент трека к паре кнопок.
• single-button — Псевдокласс применяется к кнопкам и элементам трека. Он используется для определения того, находится ли кнопка в конце скроллбара. Для элементов дорожек указывает, примыкает ли элемент трека к одной кнопке.
• no-button — Применяется к элементам трека, сообщает, что видимая часть трека приближается к краю скроллбара, другими словами, кнопки в конце трека нет.
• corner-present — Применяется ко всем элементам скроллбара и указывает на наличие угла полосы прокрутки.
• window-inactive — Применяется ко всем элементам скроллбара и сообщает, что окно со скроллбаром в данный момент активно. В последних версиях этот псевдокласс хорошо сочетается с ::selection . Мы планируем расширить его работу для любого контента и предложить в качестве нового стандартного псевдокласса.

Как использовать

Все эти псевдоэлементы и псевдоклассы нужны для кастомизации скроллбара в браузерах на движке WebKit (например браузер Google Chrome). Давайте соберем из них несколько примеров:

/* Стили для кастомизации скроллбара */ ::-webkit-scrollbar { } /* Стили для кастомизации свободной части трека */ ::-webkit-scrollbar-track-piece { } /* Выделение верхней половины (или левой половины) трека */ ::-webkit-scrollbar-track-piece:start { } /* Выделение ползунка, когда окно браузера не активно */ ::-webkit-scrollbar-thumb:window-inactive { } /* Выделение нижней или левой кнопки, когда на них наведён курсор мыши */ ::-webkit-scrollbar-button:horizontal:decrement:hover { }

Простой пример

Давайте рассмотрим самый просто пример кастомизации скроллбара с помощью префиксов ::-webkit- .

/* Размеры скроллбара */ ::-webkit-scrollbar { width: 15px; } /* Трек поле скроллбара */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background: #000; } /* Ползунок скроллбара */ ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(198, 21, 21, 1); background: rgba(198, 21, 21, 1); }

На выходе получим такой результат.

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

А еще, возможно вам будет интересно прочитать статью про кастомизацию чекбоксов и радио-кнопок.

Благодарность автору

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

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Источник

CSS: современный способ оформления скроллбаров

Настройка полосы прокрутки (scrollbar) в основных браузерах была трудна и неприятна примерно до сентября 2018 года, когда был выпущен рабочий проект W3C CSS Scrollbars, который выглядит как реальный способ устранить трудности стилизации скроллбаров.

На протяжении многих лет появлялись различные способы сделать это. Microsoft Internet Explorer был одним из первых, кто предоставил CSS API для скроллбаров, но многие разработчики были настолько разочарованы реализацией, что создавали собственные решения с помощью JavaScript.

Однако, JavaScript-решения тоже не во всём идеальны, например им трудно эмулировать высокопроизводительное поведение, допустим, прокрутку с инерцией или прокрутку больших документов.

Перенесемся в настоящее время, теперь, когда Internet Explorer вытесняется Microsoft Edge, это сводится к двум подходам:

• Chrome/Edge/Safari используют -webkit-scrollbar
• Firefox использует новую спецификацию CSS Scrollbars API (т.е. scrollbar-color и scrollbar-width ).

Давайте посмотрим на некоторые примеры кода!

Скроллбары в Chrome/Edge/Safari

В Chrome/Edge/Safari для стилизации прокрутки доступны css-свойства с вендорным префиксом -webkit-scrollbar .

body::-webkit-scrollbar < width: 12px; /* ширина scrollbar */ >body::-webkit-scrollbar-track < background: orange; /* цвет дорожки */ >body::-webkit-scrollbar-thumb < background-color: blue; /* цвет плашки */ border-radius: 20px; /* закругления плашки */ border: 3px solid orange; /* padding вокруг плашки */ >

Есть хорошие новости… И плохие новости…

Хорошие новости! Этот код прекрасно работает в последних выпусках Chrome/Edge/Safari!

Плохие новости. К сожалению, W3C официально отказалась от этой спецификации, поэтому можем ожидать в ближайшие годы её постепенное устаревание.

Скроллбары в Firefox

Firefox – чемпион в использовании новых стандартов W3C, они всегда готовы попробовать новые API. Таким образом, новые функции CSS Scrollbars уже доступны в обычных выпусках Firefox:

Здесь легко заметить несколько различий по сравнению с устаревшей спецификацией —webkit-scrollbar .

Во-первых, это лаконичный css-код! А во-вторых, в нём отсутствуют такие функции, как создание отступов и скруглений для плашки скролла. Поскольку спецификация всё ещё меняется, эти недостающие функции могут быть в неё включены.

Дальше-то, что?

Как стилизовать полосы прокрутки, с учётом отсутствия единого авторитетного API? Надо просто объединить оба подхода!

/* W3C standard сейчас только для Firefox */ * < scrollbar-width: thin; scrollbar-color: blue orange; >/* для Chrome/Edge/Safari */ *::-webkit-scrollbar < height: 12px; width: 12px; >*::-webkit-scrollbar-track < background: orange; >*::-webkit-scrollbar-thumb

Когда —webkit-scrollbar устареет, можете спокойно вернуться к новому стандарту CSS Scrollbars.

Вариант с использованием настраиваемых CSS-свойств (CSS-переменные). В этом случае появляется возможность управлять настройками CSS-свойств полосы прокрутки из Javascript, например, для управления темами:

Ещё можно поэкспериментировать с CSS-градиентом, но этот вариант только для Webkit-браузеров:

Источник

CSS: оформление скроллбаров 2022

Для максимально возможной кросс-браузерной поддержки стилизации полос прокрутки (scrollbar) лучше использовать специальные CSS-свойства с префиксом ::webkit (они понадобятся Chrome и Safari), а также стандартизированные свойства scrollbar-width и scrollbar-color (пока для Firefox).

Таким образом, базовая настройка будет выглядеть так:

.styled-scrollbars < /* плашка-бегунок и фон */ scrollbar-color: #999 #333; >.styled-scrollbars::-webkit-scrollbar < width: 10px; /* в основном для вертикальных полос прокрутки */ height: 10px; /* в основном для горизонтальных полос прокрутки */ >.styled-scrollbars::-webkit-scrollbar-thumb < /* плашка-бегунок */ background: #999; >.styled-scrollbars::-webkit-scrollbar-track < /* фон */ background: #333; >

Применение пользовательских CSS-свойств для стилизации скроллбаров

Это позволит вынести дублирующиеся значения CSS-свойств в настройки, например:

.styled-scrollbars < --scrollbar-foreground: #999; --scrollbar-background: #333; --scrollbar-size: 10px; /* плашка-бегунок, фон */ scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background); >.styled-scrollbars::-webkit-scrollbar < width: var(--scrollbar-size); /* в основном для вертикальных полос прокрутки */ height: var(--scrollbar-size); /* в основном для горизонтальных полос прокрутки */ >.styled-scrollbars::-webkit-scrollbar-thumb < /* плашка-бегунок */ background: var(--scrollbar-foreground); /* фон */ >.styled-scrollbars::-webkit-scrollbar-track < /* фон */ background: var(--scrollbar-background); >

Sass Mixin и другие опции предварительной обработки

При использовании Sass код может выглядеть следующим образом:

@mixin scrollbars( $size: 10px, $foreground-color: #999, $background-color: #333 ) < // для Chrome и Safari &::-webkit-scrollbar < width: $size; height: $size; >&::-webkit-scrollbar-thumb < background: $foreground-color; >&::-webkit-scrollbar-track < background: $background-color; >// по стандартам (Firefox) scrollbar-color: $foreground-color $background-color; >

Можно предположить, что с вендорными префиксами Autoprefixer может справиться лучше. Но это не будет хорошим решением, потому что синтаксис для каждого браузера будет очень сильно отличаться.

Если используется PostCSS, то для него есть плагин postcss-scrollbar . В коде используется стандартизированный синтаксис, а плагин делает соответствующие версии префиксов для разных браузеров.

После обработки плагином будет таким:

.scrollable::-webkit-scrollbar-thumb < background-color: yellow; >.scrollable::-webkit-scrollbar-track < background-color: green; >.scrollable::-webkit-scrollbar-corner < background-color: green; >.scrollable::-webkit-scrollbar < width: 0.5rem; height: 0.5rem; >.scrollable

Более экзотические стили скроллбаров в Chrome и Safari

В отличие от стандартизированных, префиксные ::-webkit- свойства имеют гораздо больше возможностей для стилизации полос прокрутки в CSS.

Например, ширину вертикальной полосы прокрутки можно сделать очень большой и добавить градиент:

Вот еще несколько стилей, в которых используется подход с вендорными префиксами:

Стилизация скроллбаров с помощью JavaScript

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

Для этого должны быть десятки библиотек. Например, simplebar выглядит довольно современным с простым созданием экземпляров. Вот демонстрация:

Пример кроссбраузерной стилизации полос прокрутки (scrollbar)

Это выглядит довольно прилично в Chrome, Safari и Firefox:

Источник