doka-guide · DrakesBot12 · Jun 11, 2026 · Jul 2, 2026 · Jul 2, 2026 · Jul 3, 2026
@@ -69,6 +69,7 @@ groups:
       - selection
       - marker
       - backdrop
+      - scrollbar
       - details-content
       - cue
       - file-selector-button

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Базовый пример — ::-webkit-scrollbar — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    .scrollbox {
+      max-width: 400px;
+      max-height: 180px;
+      width: 100%;
+      overflow: auto;
+      padding: 16px;
+      background: #111216;
+      color: #fff;
+      border-radius: 12px;
+      font-size: 1.1rem;
+      line-height: 1.6;
+      box-shadow: 0 2px 16px 0 #0004;
+    }
+
+    .scrollbox::-webkit-scrollbar {
+      width: 12px;
+      height: 12px;
+    }
+
+    .scrollbox::-webkit-scrollbar-track {
+      background: #1e1f22;
+      border-radius: 8px;
+    }
+
+    .scrollbox::-webkit-scrollbar-thumb {
+      background: #6b7280;
+      border-radius: 8px;
+      border: 3px solid #1e1f22;
+      min-height: 24px;
+    }
+
+    .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(::-webkit-scrollbar) {
+      .supports-notification-container {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="scrollbox">
+    <p>
+      Очень длинный контент, чтобы появилась полоса прокрутки.<br>
+      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. <br>
+      <br>
+      Ещё немного текста для вертикального скролла.<br>
+      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.<br>
+      <br>
+      Добавим горизонтальный скролл:<br>
+      <span style="display:inline-block; min-width:600px;">
+        Это очень длинная строка, которая не помещается по ширине контейнера и заставляет появиться горизонтальный скролл →
+      </span>
+    </p>
+  </div>
+  <div class="supports-notification-container">
+    <div class="supports-notification">
+      <h3>Ваш браузер не поддерживает ::-webkit-scrollbar 😢</h3>
+      <p>
+          Откройте демо в браузере с <a href="https://caniuse.com/mdn-css_selectors_-webkit-scrollbar">поддержкой</a> этого псевдоэлемента.
+      </p>
+    </div>
+  </div>
+</body>
+</html>
@@ -0,0 +1,104 @@
+---
+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
+<div class="scrollbox">
+  Очень длинный контент... Очень длинный контент... Очень длинный контент...
+</div>
+```
+
+```css
+.scrollbox {
+  max-height: 180px;
+  overflow: auto;
+  padding: 12px;
+  background: #111216;
+  color: #fff;
+  border-radius: 12px;
+}
+```
+
+<iframe title="Пример с несколькими разными скроллбарами" src="demos/basic/" height="400"></iframe>
+
+## Как пишется
+
+Семейство нестандартных псевдоэлементов:
+
+- `::-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`.
+💡 Для достижения наилучшей кроссбраузерности и контроля над стилями:
+
+- Стандартные свойства ([`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/) в том же блоке правил.