Какая ширина вертикального скролла?

Question

deepseek-v3.2 · Accepted Answer

## Ширина вертикального скролла в браузерах

**Ширина вертикального скролла** не является фиксированной величиной, стандартизированной в спецификациях CSS или HTML. Она зависит от комбинации **операционной системы**, **браузера**, **версии браузера** и **настроек пользователя** (например, масштабирования или кастомных тем). Однако на практике можно выделить типичные диапазоны и методы определения этой ширины в конкретном контексте.

### Типичные значения ширины

В современных операционных системах наблюдаются следующие примерные диапазоны:
*   **Windows (Chrome, Firefox, Edge):** Обычно **17px** в стандартном масштабе (100%).
*   **macOS (Chrome, Safari, Firefox):** Чаще всего **15px**, но может становиться тоньше или даже скрываться в некоторых состояниях (например, скроллбар в режиме overlay, который виден только при скролле).
*   **Linux:** Значение может варьироваться в зависимости от графической оболочки (GNOME, KDE) и её тем, но часто находится в диапазоне **15-17px**.

Важно понимать, что ширина скролбара в браузерах **macOS** часто использует технологию **overlay scrollbars**. Это означает, что скроллбар появляется поверх контента и не занимает постоянного места в layout, пока пользователь не начал скроллить. В **Windows** же скроллбар обычно имеет **reserved space** — он постоянно занимает место, отодвигая контент.

### Как программно определить ширину скроллбара

Для точного определения ширины скроллбара в текущем окружении используется JavaScript. Основная идея — создать скрытый контейнер с возможностью скролла, измерить разницу между его полной шириной (`offsetWidth`) и шириной видимой области для контента (`clientWidth`).

```javascript
/**
 * Функция для вычисления ширины вертикального скроллбара в текущем браузере.
 * @returns {number} Ширина скроллбара в пикселях.
 */
function getScrollbarWidth() {
  // 1. Создаем временный контейнер-обертку
  const outer = document.createElement('div');
  // 2. Задаем стили, которые гарантируют появление скроллбара
  outer.style.visibility = 'hidden';
  outer.style.overflow = 'scroll'; // Принудительно показываем скроллбар
  outer.style.width = '100px';
  outer.style.height = '100px';
  // 3. Добавляем элемент в DOM (обязательно для корректных измерений)
  document.body.appendChild(outer);

// 4. Создаем внутренний элемент, который заполнит обертку
  const inner = document.createElement('div');
  inner.style.width = '100%';
  inner.style.height = '200px'; // Высота больше, чем у outer, чтобы вызвать скролл
  outer.appendChild(inner);

// 5. Вычисляем разницу: полная ширина outer минус видимая ширина его контентной области
  const scrollbarWidth = outer.offsetWidth - outer.clientWidth;

// 6. Удаляем временные элементы из DOM
  outer.parentNode.removeChild(outer);

return scrollbarWidth;
}

// Использование
console.log(`Ширина скроллбара: ${getScrollbarWidth()}px`);
```

### Практические последствия для вёрстки

1.  **Full-width/Full-height элементы:** Если задать элементу `width: 100vw` или `height: 100vh`, он займёт всю ширину/высоту окна **включая область скроллбара**. Это может привести к появлению горизонтального скролла, когда вертикальный скроллбар активен. Решение — использовать `width: 100%` на элементе, вложенном в `<body>`, или CSS-переменные, учитывающие наличие скроллбара.

2.  **Модальные окна (Modal) и overlay:** При открытии модального окна, которое блокирует скролл страницы (`overflow: hidden` на `body`), ширина страницы мгновенно увеличивается на ширину исчезнувшего скроллбара, что может вызвать "подёргивание" контента. Стандартное решение — компенсировать эту ширину с помощью padding.
    ```css
    body.modal-open {
      overflow: hidden;
      padding-right: var(--scrollbar-width); /* Рассчитанное значение JS */
    }
    ```

3.  **Кастомные скроллбары:** При полной замене нативного скроллбара с помощью CSS-свойства **`::-webkit-scrollbar`** (работает в WebKit-браузерах) или JavaScript-библиотек (например, SimpleBar), вы полностью контролируете его ширину и поведение.

### Кроссбраузерные CSS-решения

Чтобы избежать нестабильности layout из-за разной ширины скроллбара, можно использовать CSS-приём — всегда резервировать место под него.

```css
/* Принудительно показывать скроллбар всегда (для Windows-подобного поведения в macOS) */
html {
  overflow-y: scroll;
}

/* Или использовать расчёт с помощью CSS Custom Properties и JS, как показано выше */
:root {
  --scrollbar-width: 0px;
}
```

### Итог

*   Точную ширину скроллбара **нельзя** задать единым CSS-значением.
*   **Стандартного значения не существует**, оно платформозависимо.
*   Для точных измерений в runtime всегда используйте **JavaScript**.
*   В дизайне адаптивных интерфейсов необходимо учитывать этот фактор, особенно при работе с модальными окнами и элементами на всю ширину окна.
*   Для создания стабильного, предсказуемого поведения часто предпочтительнее всегда отображать скроллбар (через `overflow-y: scroll`) или внедрять кастомные решения.

Какая ширина вертикального скролла?

Комментарии (1)

Ширина вертикального скролла в браузерах

Типичные значения ширины

Как программно определить ширину скроллбара

Практические последствия для вёрстки

Кроссбраузерные CSS-решения

Итог