Решение: вертикальный скроллбар всегда видимый на CSS

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

Если необходимо, чтобы полоса прокрутки всегда оставалась видимой, используйте в CSS свойство overflow-y: scroll; применительно к элементам html или body.

body {
  overflow-y: scroll; /* А вот и всегда видимый скроллбар! */
}

С помощью этого решения вне зависимости от содержимого страницы полоса прокрутки будет фиксированно отображаться и избавит вас от нежелательных смещений в макете.

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

Отображение полос прокрутки в различных браузерах

Обеспечение единообразного отображения полосы прокрутки в разных браузерах может быть сложной задачей из-за их неоднородных настроек по умолчанию и способов стилизации.

Браузеры на Webkit: настройка внешнего вида полос прокрутки

Браузеры на основе движка Webkit, такие как Safari и Chrome, обычно скрывают полосы прокрутки, показывая их только при активации. Такой подход может вызывать различные реакции у пользователей. Воспользуйтесь псевдоэлементом ::-webkit-scrollbar для управления видимостью и стилизации:

/* Полоса прокрутки, теперь ты не уйдешь из видимой области */
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: darkgray;
    -webkit-box-shadow: 0 0 1px white;
}

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

Firefox: обеспечение совместимости полос прокрутки

Для обработки старых версий Firefox требуется особый подход. Ранее использовался -moz-scrollbars-vertical, но с версии Firefox 64 стоит прибегать к стандартным методам:

html {
  overflow-y: scroll;
  scrollbar-color: black white; /* Новый метод задания цвета полос прокрутки */
}

body {
  overflow-y: scroll; /* Старые версии Firefox также под контролем */
}

Особенности различных операционных систем

Необходимо учесть, что у пользователей MacOS может возникнуть проблема с видимостью полос прокрутки из-за системных настроек. Несмотря на то что CSS обеспечивает унифицированный вид там, где это возможно, полный контроль над отображением полосы прокрутки возможен только с использованием JavaScript.

Модификация оформления полос прокрутки

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

Доработка внешнего вида полос прокрутки

/* Полоса прокрутки в новом модном образе */
::-webkit-scrollbar-thumb {
    background: #888; /* Элегантный цвет */
    border-radius: 10px; /* Скругленные уголки для стильного вида */
}

Избегание ошибок при настройке внешнего вида

Не стоит использовать "костыли", как, например, увеличивать height до 101%, чтобы вызвать появление полосы прокрутки. Это может привести к обрезанию содержимого или даже к появлению двойной полосы прокрутки. Лучше применить min-height с небольшим переполнением или использовать отступы для того, чтобы сохранить полосу прокрутки без искажения контента.

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

Возьмите за основу метафору дома с окном, обычно скрытым за занавесами. Помахаем волшебной палочкой CSS:

body { overflow-y: scroll; }

И теперь окно (полоса прокрутки) всегда открыто 🌞, предоставляя вашим гостям свободное передвижение по интерактивной площади.

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

Тщательно подобранные стили для полос прокрутки в различных браузерах и ОС позволяют создать единый пользовательский опыт.

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

1. Обзор текущего состояния стилизации полос прокрутки в CSS (Обновление 2022) | CSS-Tricks
2. scrollbar-gutter – CSS: Каскадная таблица стилей | MDN
3. CSS Basic User Interface Module Level 3 (CSS3 UI)
4. css – Как скрыть полосу прокрутки на HTML-странице – Stack Overflow
5. Как настроить оформление полосы прокрутки
6. "scrollbar" | Can I use... Таблицы поддержки HTML5, CSS3 и других технологий