doka-guide · DrakesBot12 · Jun 11, 2026 · Jul 2, 2026 · Jul 2, 2026 · Jul 3, 2026
@@ -67,6 +67,7 @@ groups:
       - selection
       - marker
       - backdrop
+      - scrollbar
   - name: 'Функции'
     items:
       - attr

@@ -0,0 +1,90 @@
+<!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;
+    }
+  </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>
+</body>
+</html>
@@ -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
+<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`.
+💡 Для кроссбраузерности комбинируйте подходы:
+  - в Firefox — `scrollbar-width`/`scrollbar-color`;
+  - в WebKit/Blink — семейство `::-webkit-scrollbar`.