From 8d92bfe992ca2831592d67c8c54d093b32b54d38 Mon Sep 17 00:00:00 2001 From: DrakesBot12 Date: Thu, 11 Jun 2026 13:42:44 +0300 Subject: [PATCH 1/4] docs: webkit-scrollbar --- css/index.md | 1 + css/scrollbar/demos/basic/index.html | 90 +++++++++++++++++++++++ css/scrollbar/index.md | 102 +++++++++++++++++++++++++++ 3 files changed, 193 insertions(+) create mode 100644 css/scrollbar/demos/basic/index.html create mode 100644 css/scrollbar/index.md diff --git a/css/index.md b/css/index.md index 9692ed7f2a..9e7bb43863 100644 --- a/css/index.md +++ b/css/index.md @@ -67,6 +67,7 @@ groups: - selection - marker - backdrop + - scrollbar - name: 'Функции' items: - attr diff --git a/css/scrollbar/demos/basic/index.html b/css/scrollbar/demos/basic/index.html new file mode 100644 index 0000000000..6857fc68d8 --- /dev/null +++ b/css/scrollbar/demos/basic/index.html @@ -0,0 +1,90 @@ + + + + Базовый пример — ::-webkit-scrollbar — Дока + + + + + + + + +
+

+ Очень длинный контент, чтобы появилась полоса прокрутки.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+
+ Ещё немного текста для вертикального скролла.
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ Добавим горизонтальный скролл:
+ + Это очень длинная строка, которая не помещается по ширине контейнера и заставляет появиться горизонтальный скролл → + +

+
+ + diff --git a/css/scrollbar/index.md b/css/scrollbar/index.md new file mode 100644 index 0000000000..0a8ee6166c --- /dev/null +++ b/css/scrollbar/index.md @@ -0,0 +1,102 @@ +--- +title: "`::-webkit-scrollbar`" +description: "Нестандартные псевдоэлементы для стилизации полосы прокрутки в движках WebKit/Blink. Позволяют изменять трек, ползунок и другие части скроллбара." +authors: + - drakesbot12 +related: + - css/overflow + - css/scrollbar-color + - css/pseudoelements +keywords: + - скроллбар + - scrollbar + - прокрутка + - полоса + - прокрутки + - webkit + - blink +tags: + - doka +--- + +## Кратко + +`::-webkit-scrollbar` и родственные ему псевдоэлементы — это нестандартный способ стилизовать полосу прокрутки в браузерах на движках WebKit/Blink (Chrome, Edge, Safari, Opera). Можно менять толщину, цвета, скругления и состояния отдельных частей скроллбара. Спецификации у этих селекторов нет, поведение и поддержка могут меняться. + +## Пример + +```css +/* Общая ширина скроллбара */ +*::-webkit-scrollbar { + width: 12px; /* вертикальный */ + height: 12px; /* горизонтальный */ +} + +/* Трек (фон) */ +*::-webkit-scrollbar-track { + background: #1e1f22; +} + +/* Ползунок */ +*::-webkit-scrollbar-thumb { + background: #6b7280; + border-radius: 8px; + border: 3px solid #1e1f22; /* создаём «внутренний отступ» */ +} + +/* Состояние при наведении */ +*::-webkit-scrollbar-thumb:hover { + background: #9ca3af; +} +``` + +```html +
+ Очень длинный контент... Очень длинный контент... Очень длинный контент... +
+``` + +```css +.scrollbox { + max-height: 180px; + overflow: auto; + padding: 12px; + background: #111216; + color: #fff; + border-radius: 12px; +} +``` + + + +## Как пишется + +Семейство нестандартных псевдоэлементов: + +- `::-webkit-scrollbar` — вся полоса прокрутки (задаёт размеры); +- `::-webkit-scrollbar-thumb` — ползунок; +- `::-webkit-scrollbar-track` — трек (фон); +- `::-webkit-scrollbar-track-piece` — участок трека, не занятый ползунком; +- `::-webkit-scrollbar-button` — кнопки со стрелками; +- `::-webkit-scrollbar-corner` — уголок при одновременных осях; +- `::-webkit-resizer` — «хваталка» для изменения размера в углу. + +Используются как обычные псевдоэлементы: + +```css +.container::-webkit-scrollbar-thumb { background: #888; } +``` + +## Как понять + +- Это WebKit/Blink‑специфика. В Firefox эти селекторы не работают. Для Firefox есть стандартные свойства [`scrollbar-width`](/css/scrollbar-width/) и [`scrollbar-color`](/css/scrollbar-color/). +- Рендер и доступные свойства могут отличаться между браузерами и версиями. Считайте это «best‑effort» API без гарантий стабильности. + +## Подсказки + +💡 Избегайте слишком толстых/ярких скроллбаров — они могут мешать контенту. +💡 Чтобы создать «зазор» внутри ползунка, используйте [`border`](/css/border/) цвета трека. +💡 Проверьте тёмную/светлую темы и контрастность, особенно у `thumb` и `track`. +💡 Для кроссбраузерности комбинируйте подходы: + - в Firefox — `scrollbar-width`/`scrollbar-color`; + - в WebKit/Blink — семейство `::-webkit-scrollbar`. From 06339c727ba62ab1ce22f3f517fc935501abd883 Mon Sep 17 00:00:00 2001 From: DrakesBot12 Date: Thu, 2 Jul 2026 20:23:27 +0300 Subject: [PATCH 2/4] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/scrollbar/demos/basic/index.html | 45 ++++++++++++++++++++++++++++ css/scrollbar/index.md | 8 +++-- 2 files changed, 50 insertions(+), 3 deletions(-) diff --git a/css/scrollbar/demos/basic/index.html b/css/scrollbar/demos/basic/index.html index 6857fc68d8..0d87c1091c 100644 --- a/css/scrollbar/demos/basic/index.html +++ b/css/scrollbar/demos/basic/index.html @@ -69,6 +69,43 @@ .scrollbox::-webkit-scrollbar-thumb:hover { background: #9ca3af; } + + .supports-notification-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: fixed; + inset: 0; + backdrop-filter: blur(5px); + background-color: rgba(0, 0, 0, 0.7); + padding: 30px; + z-index: 1000; + } + + .supports-notification { + max-width: 500px; + padding: 30px; + background-color: #2c2e33; + border-radius: 12px; + text-align: center; + color: #ffffff; + } + + .supports-notification h3 { + margin: 0 0 15px; + font-weight: 500; + } + + .supports-notification a { + color: #2E9AFF; + } + + @supports selector(::file-selector-button) { + .supports-notification-container { + display: none; + } + } @@ -86,5 +123,13 @@

+
+
+

Ваш браузер не поддерживает ::file-selector-button 😢

+

+ Откройте демо в браузере с поддержкой этого псевдоэлемента. +

+
+
diff --git a/css/scrollbar/index.md b/css/scrollbar/index.md index 0a8ee6166c..6939950546 100644 --- a/css/scrollbar/index.md +++ b/css/scrollbar/index.md @@ -97,6 +97,8 @@ tags: 💡 Избегайте слишком толстых/ярких скроллбаров — они могут мешать контенту. 💡 Чтобы создать «зазор» внутри ползунка, используйте [`border`](/css/border/) цвета трека. 💡 Проверьте тёмную/светлую темы и контрастность, особенно у `thumb` и `track`. -💡 Для кроссбраузерности комбинируйте подходы: - - в Firefox — `scrollbar-width`/`scrollbar-color`; - - в WebKit/Blink — семейство `::-webkit-scrollbar`. +💡 Для достижения наилучшей кроссбраузерности и контроля над стилями: + +- Стандартные свойства ([`scrollbar-width`](/css/scrollbar-width/), [`scrollbar-color`](/css/scrollbar-color/)) работают во всех современных браузерах (Chrome 121+, Edge 121+, Firefox 64+, Safari 18.2+) и должны использоваться как основной способ стилизации; +- Для более тонкой настройки (скругления, цвета фона трека и точная ширина), которые не доступны через стандартные свойства, используйте семейство `::-webkit-scrollbar`; +- Важно! В браузерах на основе Chromium (Chrome, Edge) стандартные свойства имеют приоритет. Чтобы ваши стили на основе `::-webkit-scrollbar` гарантированно применялись, убедитесь, что вы не задали конфликтующие значения для [`scrollbar-width`](/css/scrollbar-width/) и [`scrollbar-color`](/css/scrollbar-color/) в том же блоке правил. From 7d5fa1b6f5d1e95082c84a66fec45750b2008c92 Mon Sep 17 00:00:00 2001 From: DrakesWeb <89761315+DrakesBot12@users.noreply.github.com> Date: Thu, 2 Jul 2026 23:18:56 +0300 Subject: [PATCH 3/4] =?UTF-8?q?=D0=94=D0=B5=D0=BB=D0=B0=D0=B5=D0=BC=20?= =?UTF-8?q?=D0=B4=D0=BE=D0=BA=D1=83=20=D0=BB=D1=83=D1=87=D1=88=D0=B5=20:^?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Vitya <9317613+vitya-ne@users.noreply.github.com> --- css/scrollbar/demos/basic/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/scrollbar/demos/basic/index.html b/css/scrollbar/demos/basic/index.html index 0d87c1091c..d3ba10a3cc 100644 --- a/css/scrollbar/demos/basic/index.html +++ b/css/scrollbar/demos/basic/index.html @@ -101,7 +101,7 @@ color: #2E9AFF; } - @supports selector(::file-selector-button) { + @supports selector(::-webkit-scrollbar) { .supports-notification-container { display: none; } From baea7e369c0c35e1398a0cbdbafaf72f68c71fea Mon Sep 17 00:00:00 2001 From: DrakesWeb <89761315+DrakesBot12@users.noreply.github.com> Date: Fri, 10 Jul 2026 17:00:09 +0300 Subject: [PATCH 4/4] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/scrollbar/demos/basic/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/scrollbar/demos/basic/index.html b/css/scrollbar/demos/basic/index.html index d3ba10a3cc..79d2a7c344 100644 --- a/css/scrollbar/demos/basic/index.html +++ b/css/scrollbar/demos/basic/index.html @@ -125,9 +125,9 @@
-

Ваш браузер не поддерживает ::file-selector-button 😢

+

Ваш браузер не поддерживает ::-webkit-scrollbar 😢

- Откройте демо в браузере с поддержкой этого псевдоэлемента. + Откройте демо в браузере с поддержкой этого псевдоэлемента.