Как изменить внешний вид скролл бара?
@Vlad467 На Css этого не сделать. Погуглите на тему jquery custom scrollbar, есть куча плагинов, наверняка что-нибудь подберете.
13 июл 2018 в 16:30
Я для кроссбраузерности пользуюсь этим проектом grsmto.github.io/simplebar
13 июл 2018 в 16:38
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Скопировал пример с W3schools.
/* width */ ::-webkit-scrollbar < width: 20px; >/* Track */ ::-webkit-scrollbar-track < box-shadow: inset 0 0 5px grey; border-radius: 10px; >/* Handle */ ::-webkit-scrollbar-thumb < background: red; border-radius: 10px; >/* Handle on hover */ ::-webkit-scrollbar-thumb:hover Custom Scrollbar Example
Note: The -webkit-scrollbar is not supported by Firefox or IE and Edge.
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
How TO — Custom Scrollbar
Note: Custom scrollbars are not supported in Firefox or in Edge, prior version 79.
How To Create Custom Scrollbars
Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser’s scrollbar.
The following example creates a thin (10px wide) scrollbar, which has a grey track/bar color and a dark-grey (#888) handle:
Example
/* width */
::-webkit-scrollbar width: 10px;
>
/* Track */
::-webkit-scrollbar-track background: #f1f1f1;
>
/* Handle */
::-webkit-scrollbar-thumb background: #888;
>
/* Handle on hover */
::-webkit-scrollbar-thumb:hover background: #555;
>
This example creates a scrollbar with box shadow:
Example
/* width */
::-webkit-scrollbar width: 20px;
>
/* Track */
::-webkit-scrollbar-track box-shadow: inset 0 0 5px grey;
border-radius: 10px;
>
/* Handle */
::-webkit-scrollbar-thumb background: red;
border-radius: 10px;
>
Scrollbar Selectors
For webkit browsers, you can use the following pseudo elements to customize the browser’s scrollbar:
- ::-webkit-scrollbar the scrollbar.
- ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards).
- ::-webkit-scrollbar-thumb the draggable scrolling handle.
- ::-webkit-scrollbar-track the track (progress bar) of the scrollbar.
- ::-webkit-scrollbar-track-piece the track (progress bar) NOT covered by the handle.
- ::-webkit-scrollbar-corner the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
- ::-webkit-resizer the draggable resizing handle that appears at the bottom corner of some elements.
Создание стилей панелей прокрутки с помощью 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 :
body::-webkit-scrollbar width: 12px; /* width of the entire scrollbar */ > body::-webkit-scrollbar-track background: orange; /* color of the tracking area */ > body::-webkit-scrollbar-thumb background-color: blue; /* color of the scroll thumb */ border-radius: 20px; /* roundness of the scroll thumb */ border: 3px solid orange; /* creates padding around scroll thumb */ > Это снимок экрана панели прокрутки, созданной с помощью этих правил CSS:
Данный код работает с последними версиями браузеров Chrome, Edge и Safari.
К сожалению, данная спецификация была формально отменена W3C, и, вероятно, со временем ее перестанут использовать.
Создание стилей панелей прокрутки в Firefox
Для создания стилей панелей прокрутки для Firefox используются новые CSS Scrollbars.
В этом примере используются свойства scrollbar-width и scrollbar-color :
body scrollbar-width: thin; /* "auto" or "thin" */ scrollbar-color: blue orange; /* scroll thumb and track */ > Это снимок экрана панели прокрутки, созданной с помощью этих правил CSS:
Эта спецификация похожа на спецификацию -webkit-scrollbar способом контроля цвета панели прокрутки. Однако в настоящее время отсутствует поддержка заполнения и округления курсора.
Создание готовых к будущему стилей панели прокрутки
Вы можете писать код CSS так, чтобы он поддерживал и спецификацию -webkit-scrollbar , и спецификацию CSS Scrollbars .
В этом примере используются свойства scrollbar-width , scrollbar-color , ::-webkit-scrollbar , ::-webkit-scrollbar-track , ::webkit-scrollbar-thumb :
/* Works on Firefox */ * scrollbar-width: thin; scrollbar-color: blue orange; > /* Works on Chrome, Edge, and Safari */ *::-webkit-scrollbar width: 12px; > *::-webkit-scrollbar-track background: orange; > *::-webkit-scrollbar-thumb background-color: blue; border-radius: 20px; border: 3px solid orange; > Браузеры Blink и WebKit игнорируют правила, которые они не распознают, и применяют правила -webkit-scrollbar . Браузеры Firefox игнорируют правила, которые они не распознают, и применяют правила CSS Scrollbars . Когда в браузерах Blink и WebKit полностью перестанет использоваться спецификация -webkit-scrollbar , они постепенно перейдут на новую спецификацию CSS Scrollbars .
Заключение
В это статье мы кратко рассказали об использовании CSS для создания стилей панелей прокрутки и о том, как обеспечить распознавание этих стилей большинством современных браузеров.
Также существует возможность моделирования панели прокрутки. Для этого нужно скрыть панель прокрутки по умолчанию и использовать JavaScript для определения высоты и положения прокрутки. Однако эти подходы связаны с ограничениями в таких случаях, как инерционная прокрутка (например, замедление движения при прокрутке с использованием трекпада).
Если вы хотите узнать больше о CSS, на нашей странице тем по CSS вы найдете полезные упражнения и проекты по программированию.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
scrollbar — color
scrollbar — color позволяет изменять цвета полосы прокрутки и ползунка.
На данный момент scrollbar — color очень слабо поддерживается браузерами (Can I Use). Свойство будет работать только в Firefox.
Если вы используете любой другой браузер, то scrollbar — color не сработает. Поэтому под каждым демо мы добавим картинку того, как это выглядит в Firefox.
Если используете MacOS, вам нужно в настройках ОС поставить галочку «всегда отображать скроллбар», иначе полоса прокрутки будет отображаться некорректно.
Пример
Скопировать ссылку «Пример» Скопировано
Изменим цвет ползунка и самой полосы скроллбара.
html scrollbar-color: #2E9AFF #F498AD;>html scrollbar-color: #2E9AFF #F498AD; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Свойство принимает два цвета — первый задаёт цвет ползунка, а второй — цвет фона контейнера. Указать только один цвет не получится (даже если хотите сделать цвет фона и ползунка одинаковым) — будет синтаксическая ошибка. Можно указывать любые корректные значения цвета.
Вот так можно задать ползунку цвет #2 E9 A F F , а фону — # F498 A D .
html scrollbar-color: #2E9AFF #F498AD;>html scrollbar-color: #2E9AFF #F498AD; >
Также можно задавать разные цвета для скроллбаров в разных блоках, причём стилизуются как вертикальные, так и горизонтальные скроллбары.
Обратите внимание, что скроллбар с жёлтым фоном создаёт вертикальную и горизонтальную полосу, а с фиолетовым — только вертикальную. Это связано с тем, что для блока-контейнера (жёлтый фон) мы задали overflow : scroll , а для внутреннего блока — overflow — y : scroll . Поэтому у внутреннего блока появился фон только для вертикальной прокрутки, а для контейнера — сразу для вертикальной и горизонтальной.