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

Если нужно задать стили полосам прокрутки, можно использовать свойства CSS с приставкой производителя Webkit:

К сожалению, эти стили не будут работать в таких браузерах, как Firefox и Edge, и других браузерах, созданных на их основе.

Но если это Вас устраивает, Ваши возможности будут весьма широкими:

На сайте CodePen представлено очень много вариантов.

В будущем нас ждет много новых возможностей для задания стилей полосам прокрутки, начиная со свойства ширины, scrollbar-gutter.

Но что делать, если нам нужна поддержка для всех браузеров уже сейчас?

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

А вот еще одна, simple-scrollbar:

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

Вот, что можно получить в итоге:

Подробности можно узнать из этой статьи.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

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