Создание стилей для полос прокрутки
26 декабря 2018 | Опубликовано в css | Нет комментариев »
Сегодня поговорим о стилях для полос прокрутки. Это важный, хоть и не первостепенный элемент дизайна. И пусть на него часто закрывают глаза, не стоит забывать о том, что оформление этого элемента также важно для целостности дизайна.
Если нужно задать стили полосам прокрутки, можно использовать свойства CSS с приставкой производителя Webkit:
К сожалению, эти стили не будут работать в таких браузерах, как Firefox и Edge, и других браузерах, созданных на их основе.
Но если это Вас устраивает, Ваши возможности будут весьма широкими:
На сайте CodePen представлено очень много вариантов.
В будущем нас ждет много новых возможностей для задания стилей полосам прокрутки, начиная со свойства ширины, scrollbar-gutter.
Но что делать, если нам нужна поддержка для всех браузеров уже сейчас?
Если нужно задать стили полосам прокрутки, то, вероятно, придется использовать решения, выполненные с помощью JavaScript. Существуют десятки библиотек для этой цели. Например, вот довольно современно выглядящая полоса прокрутки simplebar:
А вот еще одна, simple-scrollbar:
Уникальные полосы прокрутки довольно редкие, и это во многом из-за того, что полосы прокрутки — один из элементов веб-дизайна, до сих не имеющих особых возможностей для задания стилей. Можно использовать код JavaScript, чтобы создать собственную полосу прокрутки, но это дорого, не очень точно и может подтормаживать, ухудшать быстродействие. С помощью необычных матриц CSS можно создать уникальную полосу прокрутки, которой не требуется код JavaScript для прокрутки, только код JavaScript для настройки.
Вот, что можно получить в итоге:
Подробности можно узнать из этой статьи.
Автор урока Chris Coyier
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191