Как изменить цвет скроллинга

Изменить полосу прокрутки на CSS

2016-06-04 / Вр:22:51 / просмотров: 12428

Вы задумывались о том, как изменить полосу прокрутки на сайте? Я задумывался, так как иногда хочется, чтобы абсолютно все соответствовало гамме сайта, даже полоса прокрутки.
В этой статье попробуем изменить цвет прокрутки для вашего сайта, используя только таблицу стилей.
Но, к сожалению, не все браузеры поймут и смогут выполнить ваши требования, которые вы пропишите в CSS. Эти стили подойдут только для тех браузеров, которые созданы по образу и подобию Google Chrome, OPERA и Internet Explorer. Да, вы правильно поняли, Mozilla Firfox останется в сторонке .

Полоса прокрутки для Internet Explorer

scrollbar-arrow-color – цвет стрелки.
scrollbar-track-color – цвет подложки.
scrollbar-face-color – цвет самой полосы.
scrollbar-shadow-color
scrollbar-highlight-color — цвет разделяющей полосы
scrollbar-3dlight-color
scrollbar-darkshadow-color — цвет внешних границ полосы

Код нужно вставит в CSS файл

Полоса прокрутки для Google Chrome

webkit-scrollbar — скроллбар
webkit-scrollbar-button — кнопка
webkit-scrollbar-track — трек
webkit-scrollbar-track-piece — видимая часть трека
webkit-scrollbar-thumb — ползунок
webkit-scrollbar-corner – уголок
webkit-resizer — изменение размеров

Различные состояния для полосы прокрутки

Эти псевдо селекторы позволяют точнее выбирать разные части полосы прокрутки для различного состояния. Описание смотрите на блоге WebKit (на англ. ).

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive

Источник

Стилизация полосы прокрутки с помощью CSS

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

Данное решение является очень удобным, так, как здесь не задействуются JavaScript. Что в свою очередь убирает нагрузку на сайт. Все работает с помощью стилей и имеет минимум кода.

Установка

Вставляем данный код в Таблицу стилей (CSS)

200?’200px’:»+(this.scrollHeight+5)+’px’);»> ::-webkit-scrollbar-button <
background-image:url(»);
background-repeat:no-repeat;
width:5px;
height:0px
>

::-webkit-scrollbar-thumb <
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
>

::-webkit-resizer <
background-image:url(»);
background-repeat:no-repeat;
width:4px;
height:0px
>

::-webkit-scrollbar <
width: 4px;
>

Установка на этом завершена. Теперь разберем, какая строка за что отвечает.

Цвет дорожки, по которой двигается бегунок прокрутки.

Меняем ecedee на свой цвет.

Цвет бегунка полосы, а так же его закругление.

Читайте также: Вода красного цвета цинк

Меняем 6dc0c8 на свой цвет.

Меняем значение border-radius для закругления.

Цвет бегунка при наведении на него курсора.

Меняем 56999f на свой цвет.

Основная ширина полосы прокрутки.

Меняем значение width

Пример

В качестве примера мы сделали прокрутку в таком стиле:

Установите на сайт данный скролл, просто скопировав следующий код:

200?’200px’:»+(this.scrollHeight+5)+’px’);»> ::-webkit-scrollbar-button <
background-image:url(»);
background-repeat:no-repeat;
width:6px;
height:0px
>

::-webkit-scrollbar-track <
background-color:#32312e;
box-shadow:0px 0px 3px #000 inset;
>

::-webkit-scrollbar-thumb <
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#ffcb17;
box-shadow:0px 1px 1px #fff inset;
background-image:url(‘https://yraaa.ru/_pu/24/59610063.png’);
background-position:center;
background-repeat:no-repeat;
>

::-webkit-resizer <
background-image:url(»);
background-repeat:no-repeat;
width:7px;
height:0px
>

::-webkit-scrollbar <
width: 11px;
>

Источник

Как стилизовать или убрать полосу прокрутки — CSS скроллбар

Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.

Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.

Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.

1 Как убрать полосу прокрутки CSS

Скрыть полосу прокрутки можно как у отдельного элемента на странице, так и у всей страницы целиком. Сделать это не сложно, достаточно написать следующее свойство:

2 Как изменить скроллбар CSS

Теперь давайте рассмотрим базовую структуру полосы прокрутки:

-webkit-scrollbar состоит различных псевдо-элементов.

::-webkit-scrollbar — это фон самого скроллбара.
::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.

Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.

3 CSS стили

Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.

Теперь давайте используем псевдоэлемент для создания пользовательского скроллбара. Заменим ширину по умолчанию на новую — в 7 пикселей. Затем, добавим цвет полосы через свойство background-color: #f9f9fd .

Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.

Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.

Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.

В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.

Источник

Стилизация Скролла

Сегодня будем стилизовать скролл с помощью CSS для webkit браузеров (Google Chrome / Safari / Opera / Яндекс.Браузер) и Mozilla Firefox. А так же рассмотрим изменение скролла при помощи плагина mCustomScrollbar.

Стилизация скролла для Mozilla Firefox

Чтобы изменить скролл в Firefox, используйте следующий код.

Первое значение scrollbar-color изменяет цвет ползунка, второе — цвет скроллбара.

Значения scrollbar-width изменят толщину (ширину — для вертикального скроллбара, высоту — для горизонтального):

auto — толщина скролла по умолчанию;
thin — более тонкий вариант скролла;
none — скрыть скролл.

Пример. Обратите внимание, данный пример предназначен для просмотра в Firefox.

Выберите цвет скроллбара
Выберите цвет ползунка скроллбара
Выберите толщину скролла

Какой-то контент. Текст, изображения или что-то ещё.

Стилизация скролла для webkit браузеров

Чтобы стилизовать скролл для Google Chrome, Яндекс.Браузер, Safari и Opera используйте следующие CSS свойства.

mCustomScrollbar

Теперь рассмотрим, как кроссбраузерно стилизовать скролл при помощи плагина mCustomScrollbar .

Сначала скачайте архив и извлеките к себе в проект файлы:

jquery.mCustomScrollbar.min.css
jquery.mCustomScrollbar.concat.min.js
mCSB_buttons.png

Затем подключите jQuery и файлы плагина.

Или же можете подключить все файлы через CDN jsdelivr:

Инициализация

Инициализация через JavaScript

Инициализация в HTML

Настройки

Темы mCustomScrollbar

Выбрать подходящую тему можно здесь.

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

Добавление скролла

Чтобы принудительно добавить скролл для блока, необходимо ограничить его по высоте/ширине и добавить overflow :

overflow-y: auto; — для создания вертикального скролла (+ max-height);
overflow-x: auto; — для создания горизонтального скролла (+ max-width).

При создании горизонтального скролла для текстового блока может понадобится добавление следующего css: white-space: nowrap; .

Как скрыть скролл

Скроем скролл, но оставим возможность прокрутки блока.

CSS Scroll Snap

Позволяет прокручивать не попиксельно, а целыми блоками. Базовое использование.

Источник

Как изменить цвет скроллинга

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.