Как переместить скроллбар в CSS без JavaScript: советы

Быстрый ответ

Если вы хотите управлять отступом при прокрутке с помощью CSS, используйте свойство scroll-margin. Оно применяется к тем элементам страницы, положение которых при прокрутке нужно корректировать:

.element {
  scroll-margin-top: 20px; /* Обеспечивает удобный отступ сверху при прокрутке */
}

С его помощью вы сможете настроить элемент так, чтобы при прокрутке он находился в нужном месте.

Перемещение полосы прокрутки справа налево

Хотите переместить полосу прокрутки с правой стороны экрана на левую? Воспользуйтесь свойством CSS direction, и полоса прокрутки поменяет положение:

.container {
  /* Перемещает полосу прокрутки на левую сторону */
  direction: rtl;
}

Переворот элементов страницы снизу вверх

Думали о перевороте элементов страницы снизу вверх? Встречайте свойство transform, с помощью которого это можно реализовать:

.container {
  transform: rotate(180deg); /* Переносит полосу прокрутки наверх страницы */
  overflow: hidden; /* Скрывает видимость обычной прокрутки */
}
.inner {
  /* Возвращает содержимое в исходное положение */
  transform: rotate(-180deg); 
}

Регулировка размеров элементов

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

Визуализация

Воспринимайте вашу полосу прокрутки как экспонат в галерее, которому нужна правильная позиция для привлечения внимания посетителей. CSS позволяет осуществлять точное позиционирование:

.gallery .scrollbar-masterpiece {
  position: absolute;
  right: 10px;    /* Позиционирование полосы прокрутки горизонтально справа */
  top: 50px;      /* и вертикально сверху */
}

В результате, полоса прокрутки займет именно ту позицию, что вы для нее предусмотрели.

Продвинутые методы работы с полосой прокрутки

Управление переполнением контента

Свойство overflow поможет регулировать отображение контента в горизонтальной и вертикальной плоскостях:

.scrollable-container {
  /* Если нужно, добавляем горизонтальную полосу прокрутки */
  overflow-x: auto;

  /* Блокируем вертикальную прокрутку */
  overflow-y: hidden;
}

Подробнее об этом расскажет наш спикер на видео

Точное выравнивание элементов

Маргины и отступы будут полезны для точной подгонки позиции контейнера:

.scrollable-container {
  margin: 0 auto; /* Центрирование контейнера */
  padding: 10px; /* Добавление дополнительного пространства */
}

Вращение вокруг своей оси

Свойство transform позволяет вращать контент, что особо применимо для горизонтальной прокрутки вертикально ориентированного содержимого:

.vertical-content {
  /* Готовимся к горизонтальной прокрутке за счет поворота содержимого */
  transform: rotate(-90deg);
}

Изменение направления текста и прокрутки

Атрибут dir контролирует направление текста и прокрутки:

<div dir="rtl">
  <!-- Текст и прокрутка справа налево -->
</div>

Вложенные элементы могут иметь обратное направление:

<div dir="rtl">
  <div dir="ltr">
    <!-- Прокрутка слева направо для внутреннего элемента -->
  </div>
</div>

Стилизация полосы прокрутки

Нужно изменить стиль полосы прокрутки? Для этого предназначен псевдоэлемент ::webkit-scrollbar:

/* Меняем стиль полосы прокрутки */
::-webkit-scrollbar {
  width: 10px;
}

Учет кросс-браузерности

Не забывайте о кроссбраузерности: не все CSS-свойства, которые влияют на поведение полосы прокрутки, поддерживаются всеми браузерами одинаково. Для обеспечения совместимости используйте инструменты, например, autoprefixer.

Полезные материалы

1. Современное состояние стилизации полос прокрутки в CSS (Обновление 2022) | CSS-Tricks — полное руководство по стилизации полос прокрутки.
2. Scrollbar-color – CSS | MDN — полезные советы по свойству scrollbar-color от MDN.
3. Scrollbar-width – CSS | MDN — гайд по свойству scrollbar-width.
4. Как создать пользовательскую полосу прокрутки — практическое руководство по созданию индивидуального дизайна для полосы прокрутки.
5. Скрыть полосу прокрутки, но сохранить возможность прокрутки – Stack Overflow — как скрыть полосу прокрутки, не потеряв возможности её использования.
6. CSS Scrollbars Module Level 1 — документация по стилизации полос прокрутки от W3C.