Как изменить полосу прокрутки css

Руководство по стилизации скроллбара (полосы прокрутки) в CSS

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

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

Знакомство со скроллбаром

Скроллбар — это часто упускаемый из виду элемент веб-дизайна. Хотя она может показаться незначительной деталью, она играет важную роль в навигации сайта. Стандартный скроллбар часто бывает скучной и может выглядеть неуместно, нарушая общую эстетику. К счастью, вы можете легко настроить скроллбар с помощью CSS. Для этого потребуется написать два набора правил CSS для браузеров Webkit, таких, как Chrome, Edge, Safari и Firefox.

Прежде чем погрузиться в код, давайте убедимся, что мы понимаем структуру скроллбара. Знание этого поможет при создании стиля с помощью CSS, так как вы можете использовать различные свойства для выделения определённых частей полосы прокрутки (скроллбара). Ниже перечислены элементы, из которых состоит скроллбар:

• Бегунок: Подвижная часть скроллбара, представляющая текущую позицию содержимого. Его можно нажать и перетащить для прокрутки содержимого вверх или вниз.
• Дорожка: Область скроллбара, по которой перемещается бегунок. Она представляет собой всю длину содержимого.
• Кнопки со стрелками: Расположенные в верхней и нижней части дорожки скроллбара, кнопки со стрелками можно нажимать для прокрутки содержимого.
• Границы скроллбара: Линии, которые окружают элемент скроллбара.
• Угол скроллбара: Пересечение между вертикальным и горизонтальным скроллбарами, когда оба присутствуют.

Стилизация скроллбара в Chrome, Edge и Safari

Браузеры Webkit позволяют настраивать скроллбар с помощью псевдоэлементов ::-webkit-scrollbar , ::-webkit-scrollbar-button , ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-track и других. Каждый из них нацелен на различные части скроллбара, как указано выше. В CodePen ниже показан пример стилизованного скроллбара с использованием вышеуказанных псевдоэлементов:

В приведённом выше коде мы отобразили вертикальный и горизонтальный скроллбары, но в большинстве случаев мы отобразили бы только одну. Для этого мы можем изменить свойство overflow , которое отвечает за видимость скроллбара, на overflow-x или overflow-y , в зависимости от того, по какой оси мы будем отображать скроллбар. Однако для приведённого выше примера этого будет недостаточно, если мы не сделаем изображение отзывчивым, установив его ширину и высоту на 100% .

Селекторы псевдокласса скроллбара

Чтобы создать более индивидуальный дизайн, вы можете выбрать определённые элементы скроллбара и применить к ним стили, добавив псевдокласс к каждому псевдоэлементу. Ниже приведены некоторые из наиболее распространённых псевдоклассов:

• :horizontal : Используется для придания стиля горизонтальному скроллбару, отличного от вертикального скроллбара. Например, вы можете задать другую ширину или цвет для горизонтальной скроллбара.
• :vertical : Используется для стилизации в CSS вертикального скроллбара, отличной от горизонтального скроллбара.
• :decrement : Применяется к кнопкам со стрелками в начале скроллбара. Используется для стилизации кнопки уменьшения или стрелки вверх для вертикального скроллбара и стрелки влево для горизонтального скроллбара.
• :increment : Применяется к кнопке со стрелкой в конце скроллбара. Используется для стилизации кнопки увеличения или стрелки вниз для вертикального скроллбара и стрелки вправо для горизонтального скроллбара.
• :start : Применяется к первым кнопкам и первому фрагменту дорожки скроллбара, которые находятся в верхней или левой части вертикального или горизонтального скроллбара соответственно
• :end : Применяется к последнему фрагменту дорожки скроллбара, которые находятся внизу или справа вертикального, или горизонтального скроллбара, соответственно.

Ниже приведён пример, в котором используются все вышеперечисленные псевдоклассы, кроме :horizontal , чтобы придать вертикальному скроллбару другой вид:

В примере ниже используется псевдокласс :horizontal для вставки тени на дорожку горизонтального скроллбара:

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

Стилизация скроллбара в Firefox

Firefox не предлагает никаких продвинутых методов стилизации, как браузеры Webkit. На момент написания статьи доступны только свойства scrollbar-width и scrollbar-color , что является стандартом, определённым W3C CSS Scrollbars. Эти свойства можно использовать для стилизации ширины скроллбара, бегунка и цвета дорожки:

body  
scrollbar-width: thin; 
scrollbar-color: #4d7fff #ddd; 
>

Стилизация скроллбара для большей поддержки кроссбраузерности

При оформлении скроллбара рекомендуется комбинировать спецификации Webkit и W3C CSS Scrollbars, чтобы охватить большее количество браузеров:

body  
scrollbar-width: thin; 
scrollbar-color: #4d7fff #ddd; 
> 
 
body::-webkit-scrollbar  
width: 10px; 
height: 10px; 
> 
 
body::-webkit-scrollbar-thumb  
background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%); 
border-radius: 5px; 
> 
 
body::-webkit-scrollbar-track  
background-color: #ddd; 
border: 1px solid #ccc; 
> 
 
body::-webkit-scrollbar-button  
background-color: #4d7fff; 
border-radius: 5px; 
>

В браузерах WebKit правила, которые не распознаны, будут проигнорированы, и браузеры будут применять правила -webkit-scrollbar . С другой стороны, в браузерах Firefox правила, которые не распознаются, также будут игнорироваться, и браузеры будут применять правила CSS правила скроллбара. Таким образом, скроллбар сохранит свой стиль в большем количестве браузеров. Хотя недостатком является то, что в Firebox нет продвинутых методов стилизации, как в Webkit, вы сможете придать скроллбарам одинаковый вид.

Заключение

Стилизация скроллбара придаёт сайту более совершенный вид. Она также может помочь выделить бренд или продукт, включив его цветовую схему или логотип в дизайн скроллбара. Однако рекомендуется не слишком далеко отходить от первоначального вида скроллбара, чтобы не сделать её непривычной для пользователей и не снизить удобство пользования. Надеюсь, вам понравилась эта статья. Счастливого кодинга!

Настройка полосы прокрутки с помощью CSS

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

В этом руководстве мы рассмотрим самый простой способ – CSS3. Также есть плагины jQuery для настройки полосы прокрутки, но, чтобы их использовать, вам придется добавить больше JavaScript.

Основные термины

Пользовательские полосы прокрутки отображаются с префиксом поставщика -webkit; так они определяются в браузерах, использующих механизм рендеринга Webkit и Blink. На картинке ниже зеленым выделен бегунок, оранжевым – дорожка.

-webkit-scrollbar состоит из семи различных псевдоэлементов, которые вместе составляют полный элемент полосы прокрутки:

1. ::-webkit-scrollbar – фон полосы.
2. ::-webkit-scrollbar-button – кнопки направлений на полосе прокрутки.
3. ::-webkit-scrollbar – отслеживание пустого пространства ниже индикатора выполнения.
4. ::-webkit-scrollbar-track-piece — самый верхний слой индикатора выполнения, не закрытый бегунком.
5. ::-webkit-scrollbar-thumb – размер перетаскиваемого элемента изменяется в зависимости от размера прокручиваемого элемента.
6. ::-webkit-scrollbar-corner – нижний угол прокручиваемого элемента, в котором встречаются две полосы прокрутки (вертикальная и горизонтальная).
7. ::-webkit-resizer – перетаскиваемый маркер изменения размера, который появляется над полосой прокрутки в нижнем углу некоторых элементов.

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

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

Сначала создайте файлы index.html и style.css и откройте текущий каталог в редакторе кода. В файл index.html поместите следующий код:

Во-первых, в этом файле мы устанавливаем ширину, высоту и фоновый цвет класса .scrollbar (width, height, background-color соответственно), затем мы определяем overflow-y: scroll, чтобы получить вертикальную полосу прокрутки. Параметр min-height: 450px в классе .force-overflow, чтобы полоса прокрутки появилась.

Взгляните на файл styles.css:

.scrollbar < background-color: #F5F5F5; float: left; height: 300px; margin-bottom: 25px; margin-left: 22px; margin-top: 40px; width: 65px; overflow-y: scroll; >.force-overflow

В результате мы получим такую полосу:

Давайте используем псевдоэлемент scrollbar для создания пользовательской полосы прокрутки. Он изменит стандартную ширину полосы до 6 пикселей, а затем установит цвет фона на #F5F5F5.

#style-1::-webkit-scrollbar

Как вы знаете, полоса прокрутки содержит дорожку, кнопку и бегунок (track, button и thumb). Попробуем придать бегунку стильный вид. Мы используем для этого псевдоэлемент с префиксом -webkit (например, ::-webkit-scrollbar-thumb) и установим фоновый цвет полосы прокрутки.

#style-1::-webkit-scrollbar-thumb

После этого полоса прокрутки выглядит так:

Теперь давайте используем в scrollbar-track псевдоэлемент box-shadow, чтобы сделать добавить контраст между полосой прокрутки и бегунком.

#style-1::-webkit-scrollbar-track

Заключение

В этой статье мы рассмотрели следующие вопросы:

• Пользовательские полосы прокрутки уже не редкость. Вы можете встретить их на крупных сайтах и ​​в блогах, особенно в личных портфолио.
• Существует множество плагинов jQuery, которые помогут вам изменить полосу прокрутки, но они требуют дополнительного кода JavaScript.
• Пользовательские полосы прокрутки отображаются через префикс -webkit.
• Кроме того, мы выяснили, из чего состоит базовая структура полосы прокрутки.

CSS позволяет легко стилизовать прокрутку, но такие полосы выглядят немного грубо. Однако операционные системы типа Windows, OS X и Linux предоставляют собственные стили для полосы прокрутки. Это, в свою очередь, может привести к нежелательным результатам, конфликтам и несоответствиям внутри вашего проекта. Помните по принципе KISS (keep it simple, stupid), не делайте свой код слишком причудливым.

Примечание: Полный код этого руководства можно найти на CodePen.

Как изменить полосу прокрутки css

В сентябре 2018 г. комитет W3C в документе CSS Scrollbars определил спецификации настройки внешнего вида панелей прокрутки с помощью CSS.

В 2020 году 96% пользователей Интернета запускали браузеры, поддерживающие стили панелей прокрутки CSS. Однако, чтобы реализовать поддержку Blink, WebKit и браузеров Firefox, нужно написать два набора правил CSS.

В этом учебном модуле вы научитесь использовать CSS, чтобы настраивать панели прокрутки для поддержки современных браузеров.

Предварительные требования

Для понимания этой статьи вам потребуется:

• Знакомство с концепциями префиксов поставщиков, псевдоэлементов и постепенного сокращения возможностей.

Создание стилей панелей прокрутки для Chrome, Edge и Safari

Для создания стилей панелей прокрутки для Chrome, Edge и Safari требуется псевдоэлемент -webkit-scrollbar с префиксом поставщика.

Вот пример с использованием псевдоэлементов ::-webkit-scrollbar , ::-webkit-scrollbar-track и ::webkit-scrollbar-thumb :

Это снимок экрана панели прокрутки, созданной с помощью этих правил CSS:

Данный код работает с последними версиями браузеров Chrome, Edge и Safari.

К сожалению, данная спецификация была формально отменена W3C, и, вероятно, со временем ее перестанут использовать.

Создание стилей панелей прокрутки в Firefox

Для создания стилей панелей прокрутки для Firefox используются новые CSS Scrollbars.

В этом примере используются свойства scrollbar-width и scrollbar-color :

Это снимок экрана панели прокрутки, созданной с помощью этих правил CSS:

Эта спецификация похожа на спецификацию -webkit-scrollbar способом контроля цвета панели прокрутки. Однако в настоящее время отсутствует поддержка заполнения и округления курсора.

Создание готовых к будущему стилей панели прокрутки

Вы можете писать код CSS так, чтобы он поддерживал и спецификацию -webkit-scrollbar , и спецификацию CSS Scrollbars .

В этом примере используются свойства scrollbar-width , scrollbar-color , ::-webkit-scrollbar , ::-webkit-scrollbar-track , ::webkit-scrollbar-thumb :

Браузеры Blink и WebKit игнорируют правила, которые они не распознают, и применяют правила -webkit-scrollbar . Браузеры Firefox игнорируют правила, которые они не распознают, и применяют правила CSS Scrollbars . Когда в браузерах Blink и WebKit полностью перестанет использоваться спецификация -webkit-scrollbar , они постепенно перейдут на новую спецификацию CSS Scrollbars .

Заключение

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

Также существует возможность моделирования панели прокрутки. Для этого нужно скрыть панель прокрутки по умолчанию и использовать JavaScript для определения высоты и положения прокрутки. Однако эти подходы связаны с ограничениями в таких случаях, как инерционная прокрутка (например, замедление движения при прокрутке с использованием трекпада).

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

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Быстрый совет: приведение полос прокрутки в соответствие с вашим UI Design

Этот совет поможет вам улучшить внешний вид полос прокрутки, в соответствии с дизайном пользовательского интерфейса. Мы посмотрим, что предлагают нам браузеры WebKit с точки зрения CSS, плюс мы будем использовать резервную копию jQuery для обслуживания других браузеров.

Ищете ярлык?

Если вам нужна помощь в разработке определённого компонента вашего сайта, быстрее получить её от профессионала. Envato имеет специалистов, готовых помочь с обновлением или настройкой всех видов веб-компонентов.

Быстрая памятка о браузерах

Когда мы говорим о браузерах на базе Webkit, мы говорим о Apple Safari и Google Chrome. Вместе они в настоящее время занимают более 40% рынка настольных браузеров. Для планшетов iPad Apple всегда будет использовать Webkit независимо от того, какой браузер используется в компании. Google также добавил Chrome в свою ОС Android, и Chromebooks, конечно, основаны на Google Chrome.

Если верить этим цифрам, для стилей прокрутки должно быть очень светлое будущее!

Шаг 1. Простая страница с полосами прокрутки

Прежде чем мы перейдём к теме стилей прокрутки с CSS, нам нужна функциональная демонстрация; страница с полосами прокрутки. Полосы прокрутки можно увидеть, если:

• Содержимое больше видимой области окна (справа появится полоса прокрутки).
• textarea содержит достаточно текста, чтобы появлялись полосы прокрутки.
• iframe используется для отображения другой страницы..
• Элемент div или любой другой элемент блока имеет свой overflow набор свойств.

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

Это просто div с большим количеством фиктивного контента. И первоначальный CSS, который устанавливает некоторые фиксированные размеры и запускает горизонтальную и вертикальную полосы прокрутки:

Вы должны увидеть что-то похожее на это:

Шаг 2. Начало работы с браузерами Webkit

Некоторое время назад (several years) CSS Pseudo Elements были представлены в браузерах Webkit для указания полосы прокрутки, предоставляя возможность стилизовать страницу в соответствии с вашей темой.

Давайте придумаем что-нибудь, используя префиксы -webkit- и webkit в свойствах. Имейте в виду, что я придерживаюсь только основных свойств CSS для удобства понимания, с объяснениями в комментариях.

Когда этот псевдоэлемент присутствует, WebKit отключит встроенный рендер прокрутки и просто использует информацию, предоставленную в CSS. — Surfin’ Safari

А теперь о некоторых других псевдоэлементах:

После добавления этого CSS вы сможете увидеть следующий эффект (опять же, только браузеры Webkit).

Угадай, что это? Internet Explorer имеет собственную стилистику прокрутки!

Правильно — на самом деле IE был первым браузером, который поддерживал стиль полос прокрутки через CSS. Это было еще в дни IE 5.5, но изменить можно было только цвет.

Эти свойства можно использовать и сегодня; взгляните на него в IE 9 для демонстрации:

Посмотрите, как это будет выглядеть:

Шаг 3. Отступление для браузеров Non-Webkit

Достаточно о WebKit. Firefox, IE и Opera также могут присоединиться. Для них у нас есть хорошее решение в форме jScrollPane. Этот плагин jQuery разработан Kelvin Luck, и он будет нашим спасителем.

На веб-сайте Kelvin полно хороших примеров, но для простого использования нам нужно загрузить jQuery и jScrollPane файлы и реализовать их следующим образом:

Следуя нашей теме, давайте откроем jquery.jscrollpane.css и отредактируем следующие строки со значениями цвета (для повышения производительности вы можете поместить все стили в свои собственные файлы):

Вот скриншот того, что вы увидите в Firefox:

Заключение

Веб-приложения, такие как Gmail и Google+ (наряду со многими другими примерами) уже приняли идею и если этот импульс продолжится, возможно, Firefox и IE также предоставят свои собственные решения.

Надеюсь, вам понравился этот быстрый совет, и я с нетерпением жду того, что вы сделаете с полосами прокрутки в ваших дизайнерских работах!

Дополнительные ресурсы

• Custom Scrollbars in WebKit by Chris Coyier
• Styling Scrollbars on webkit.org

Настраиваемые полоски прокрутки на Envato Market

Если вы ищете готовое решение, Envato Market предлагает широкий выбор scrollbars, которые вы можете подключить к вашему сайту для достижения ряда эффектов. Вот некоторые из них:

1. Lazybars — Themeable responsive scrollbar jQuery plugin

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

Используйте темы, связанные с Lazybars или создайте свои собственные с помощью простых CSS.

2. Fancy Scrollbar — WordPress

“Fancy Scrollbar – WordPress” — это плагин, который может создавать пользовательскую полосу прокрутки на сайтах WordPress. У него есть много вариантов настройки. Можно настроить цвет, эффекты, прокрутку, полосу и многое другое.

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar — настраиваемый плагин jQuery для полосы прокрутки вашего сайта WordPress. С помощью этого плагина вы можете настроить свою полосу прокрутки веб-страницы, и встраивать пользовательскую полосу прокрутки по шорткоду в любом месте.

4. DZS Scroller

DZS Scroller предоставляет полосу прокрутки для вашего сайта, которую вы легко можете настроить с помощью CSS, если трёх выделенных скинов недостаточно. Он поставляется с расширенными функциональными возможностями, такими как прокрутка при наведении или выцветание при отпускании мыши. И это работает на iPhone / iPad.

5. CSS3 Scrollbar Styles

Легко использовать красивую и красочную полосу прокрутки CSS3 для вашего сайта. Просто вставьте в существующий файл CSS и наслаждайтесь новой CSS3 Scrollbar.

Custom Scrollbars In CSS

Custom scrollbars are getting more popular nowadays, and I’m very keen to dig into them. There are different reasons why to customize a scrollbar. For example, the default scrollbar can make an app UI look inconsistent across multiple operating systems, and here we can get the benefit of having a unified style.

I have always been interested in learning about how to customize a scrollbar in CSS but didn’t get the chance to do so. In this article, I will take the opportunity and learn about them and document this journey.

Introduction

The first thing that I want to explain is the components or the parts of a scrollbar. A scrollbar contains the track and the thumb. Here is a visual that shows them:

The track is the base of the scrollbar, where the thumb is what the user drag to scroll within a page or a section.

There is one important thing to keep in mind that a scrollbar can work horizontally or vertically, depending on the design. Also, that can change while working on a multilingual website that works in both left-to-right (LTR) and right-to-left (RTL) directions.

Customizing a scrollbar design

Having a custom scrollbar used to be webkit only so Firefox and IE were out of the game. We have a new syntax that works only in Firefox and will make things easier for us when it’s fully supported. I will go through the old Webkit syntax, and then the new one.

The old syntax

The scrollbar width

First, we need to define the size of the scrollbar. This can be the width for vertical scrollbars, and the height for horizontal ones.

With that set, we can style the scrollbar itself.

The scrollbar track

This represents the base of the scrollbar. We can style it by adding background colors, shadows, border-radius, and borders.

The scrollbar thumb

Once we have the base of the scrollbar ready, we need to style the scrollbar thumb. That is important as the user might drag this thumb to interact with the scrollbar.

With that, we have covered the old way of styling a custom scrollbar in CSS. Let’s explore the new syntax.

The new syntax

Scrollbar width

As it says, this defines the scrollbar width and the values we care about most are auto and thin . Unfortunately, we can’t define a specific number like in the webkit syntax.

Scrollbar color

With this property, we can define a color for both the scrollbar track and thumb as pair values.

As simple as this new syntax is, but it’s limiting. We can only apply solid colors. We can’t add shadows, gradients, rounded edges, or anything like that. What we’re allowed to customize is the colors only.

Scrollbar gutter

Have you ever wondered about how we can avoid layout changes when the content grows in a scrolling container? Let’s take the following case.

We have a container with 16px padding on all sides. Until now, the content is short and the scrollbar isn’t shown because overflow-y: auto is used (A friendly reminder: when auto is used for overflow-y , it won’t show a scrollbar until the content is long).

When the content grows, the scrollbar will be shown and thus the space available for the content will be reduced.

Notice how the content shifted when there is a scrollbar. That’s because the browser should reserve a space for the scrollbar.

Thankfully, this can be solved now with scrollbar-gutter (supported in Chromium-based browsers, v94+). It works in a way that lets us reserve the space in advance. The default value is auto , and the other value is stable . It’s also worth mentioning that there is an optional value both-edges which shows the gutter on both sides.

That way, when the content grows, it won’t shift because the browser already reserved a space for it. Here is a visual that shows the two cases (Short content vs long content).

To make things more clear, I worked on an interactive demo that shows how a gutter is added to a container.

Specifying the scope of the custom scrollbar

An important thing to know is that where to customize the scrollbar. Do you want the style to be generic and work for all scrollbars on the website? Or do you want it for specific sections only?

With the old syntax, we can write the selectors without attaching them to an element, and they will be applied to all scrollable elements.

However, if you want to apply for a specific section only, you need to append the element before the selectors.

For the new syntax, it’s almost the same. The thing that I noticed is that if you want a generic style, it should be applied to the element, not the .

I tried adding the above for the but it didn’t work as expected.

Now that we know how the old and new syntax work, let’s get into customizing some scrollbar designs.

Customizing a scrollbar design

Example 1

Before diving into customizing the scrollbar, it’s worth talking about the default style in Mac OS. Here is how it looks:

• The scrollbar track has a border on the left and right sides, with a solid background color.
• The scrollbar thumb is rounded and with space around it from the left and right sides.

For windows, it’s a bit different.

Here is how we can customize the scrollbar based on the mockup above.

Adding the border-radius for both the track and thumb is necessary, as it won’t work on the ::webkit-scrollbar .

With the new syntax, we can’t adjust the width of the scrollbar, and what’s only possible is to change the track and thumb background color.

Note: the next examples only work with the webkit syntax. For a real-life project, you can add both the webkit and the new syntax.

Example 2

For this example, the design is a bit heavier as it contains gradients and shadows. Is that doable? Yes, we can apply inner shadows and gradients to mimic that effect. Let’s see how!

Example 3

We can also add borders to the thumb and track, which can help us with some tricky designs.

Based on the same example, we can reset the top and bottom borders to zero and get an interesting effect for the thumb. Notice those little elements at the top and bottom of the thumb.

Example 4

In this example, we want the scrollbar thumb to have an offset from all sides. Since it’s not possible to use padding with the scrollbar properties, we need a hack around that using CSS borders and background-clip . I learned about this idea from this great article by Gabriel Romualdo.

By default, when an element has a background and border, the browser will clip the border-box .

Consider the following example:

We have a button with a 6px black border. It doesn’t have padding for the sake of explaining the concept. Suppose that box-sizing is set to border-box , the border will be included within the size of the button. As a result, the border is appearing above the background.

Now, when we apply background-clip: content-box , the background will only appear around the content.

I hope the idea is clear. Let’s get back into the scrollbar thumb. To mimic the effect, we need to add the following:

With that, we have explored how to customize different scrollbar designs. For Firefox, we can use the new syntax but again, it’s limited only to the thickness and solid colors.

Can we add hover effects?

Yes, we can add a hover effect to the scrollbar thumb for the old and new syntax.

With the new syntax, we can add transitions, whereas with the old one, we cannot. This isn’t a big deal to me.

Show the scrollbar when it’s needed

Creating a scrollable element is possible by adding a value other than visible to the overflow property. It’s recommended to use the auto keyword as it will only show the scrollbar if the content exceeds its container.

Accessibility concerns

While customizing a scrollbar design, please keep in mind to have good contrast between the thumb and the track, so it can be easy to be noticed by the user.

Consider the following “bad” example for a custom scrollbar.

The thumb color is barely noticeable. This is not good for the user as it will make it harder in case they are used for scrolling via the thumb.

Своя полоса прокрутки

Здесь вы узнаете, как сделать свою пользовательскую полосу прокрутки при помощи CSS.

Пользовательские полосы прокрутки

Внимание! Пользовательские полосы прокрутки не поддерживаются в Firefox и Edge до версии 79.

Как сделать свою полосу прокрутки

Браузеры Chrome, Edge, Safari и Opera поддерживают нестандартный псевдоэлемент ::-webkit-scrollbar , который позволяет изменять внешний вид полосы прокрутки браузера.

В следующем примере создается тонкая (ширина 10px) полоса прокрутки с серой дорожкой и темно-серым бегунком (#888):

В следующем примере создается полоса прокрутки с тенями:

Селекторы полосы прокрутки

Для браузеров, поддерживающих пользовательскую полосу прокрутки, можно использовать следующие псевдоэлементы:

Похожие публикации:

1. Как сделать обводку текста в html css
2. Как сделать отступ между строками в css
3. Как сделать перенос в css
4. Как сделать поисковую строку в html css

Настройка полосы прокрутки в CSS

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

Постановка задачи

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

Решение находится быстро. В 2018 году появилась спецификация CSS Scrollbars , которая определяет настройку внешнего вида полосы. Этой спецификацией введены два новых свойства, которые влияют на визуальный стиль скроллбара:

• scrollbar-color — для управления цветом;
• scrollbar-width — для управления шириной.

Кажется, стилизации скроллбаров теперь делается за пять минут. Осталось проверить это на практике.

Применение свойств CSS Scrollbars

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

• бегунок (thumb), за который мы тянем, чтобы прокрутить страницу;
• дорожка (track), по которой перемещается бегунок.

Попробуем применить к ним свойства для стилизации внешнего вида. Сначала разберёмся с шириной элемента. У scrollbar-width три возможных значения:

• auto — ширина по умолчанию;
• thin — тонкая полоса;
• none — скрытие полосы.

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

Свойство scrollbar-color принимает на вход два значения. Первое — цвет бегунка, второе — цвет дорожки. По умолчанию задано значение auto, которое говорит браузеру, что нужно использовать дефолтные параметры.

Соединим оба свойства и получим такую стилизацию:

body scrollbar-width: thin; 
scrollbar-color: green black;
>

Выглядит очень просто. Проверяем в браузере Firefox.

Всё работает, полоса для скролла на странице стала чёрно-зелёной и тонкой.

Поддержка кроссбраузерности

В тестовой среде стилизация скролла с помощью scrollbar-color и scrollbar-width выглядит отлично. Но перед отправкой в продакшн нужно проверить кроссбраузерность — не все же пользуются Firefox.

Открываем стилизованную страницу в Google Chrome и видим, что полоса прокрутки осталась дефолтной. В Edge и Safari — тот же результат. Чтобы проверить свои подозрения, смотрим поддержку свойств CSS Scrollbars через Can I Use. Ситуация печальная. Спустя четыре года после представления спецификации удобная настройка полосы прокрутки недоступна в большинстве браузеров. Исключение — десктопная и мобильная версии Firefox.

Это что же, у нас не получится реализовать отрисованный дизайн и придётся всё менять?

Спокойно, решение есть. Для изменения визуального представления скроллбара в Chrome, Edge и Safari можно использовать псевдоэлементы:

• ::-webkit-scrollbar — параметры всего элемента навигации;
• ::-webkit-scrollbar-track — параметры дорожки.
• ::webkit-scrollbar-thumb — параметры бегунка.

Использование псевдоэлементов выглядит как костыль. Но делать нечего, добрасываем стили для кроссбраузерности:

body::-webkit-scrollbar width: 15px; /* Ширина всего элемента навигации */
>

body::-webkit-scrollbar-track background: #fff; /* Цвет дорожки */
>

body::-webkit-scrollbar-thumb background-color: #050c26; /* Цвет бегунка */ 
border-radius: 20px; /* Округление бегунка */ 
border: 3px solid #050c26; /* Оформление границ бегунка */
>

Из очевидных плюсов — можно явно определить ширину полосы. Вот такой скроллбар сделать можно только с помощью псевдоэлементов:

Огромное название Timeweb Cloud перекликается по цвету с очень широким скроллбаром. Отдельная спецификация для элемента scrollbar такой возможности не предполагает. Там выбор ограничен двумя вариантами — автоматический расчёт ширины или отображение тонкого элемента навигации (насколько это возможно, учитывая системные настройки).

Та же история с цветами. С помощью псевдоэлементов можно задавать не только цвета, но и градиенты. Немного изменим стиль бегунка:

body::-webkit-scrollbar-thumb background: linear-gradient(45deg, #EECFBA, #C5DDE8); 
border-radius: 20px; 
border: 3px solid #050c26;
>

Теперь бегунок переливается разными цветами.

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

Заключение

Для создания стилей панелей прокрутки пока приходится использовать оба подхода — если, конечно, вам дорога кроссбраузерность. Но при добавлении псевдоэлементов держите в голове, что, возможно, скоро их использование станет неактуальным. По современным стандартам это не лучшее решение для стилизации скроллбара. Но кроме стандартов есть ещё производственная необходимость, которая заставляет идти на разные компромиссы.