BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Изменить полосу прокрутки на CSS

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

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

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

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

html
{
scrollbar-arrow-color: /*1- цвет стрелки*/;
scrollbar-track-color: /* 2 – цвет подложки */;
scrollbar-face-color: /* 3- цвет самой полосы */;
scrollbar-shadow-color: / * 4 – цвет разделяющей полосы */;
scrollbar-highlight-color: / * 4 – цвет разделяющей полосы */;
scrollbar-3dlight-color: /* 5- цвет внешних границ полосы */;
scrollbar-darkshadow-color: /* 5- цвет внешних границ полосы */;
}

СХЕМА ПАРАМЕТРОВ:

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

Пример:

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

html
{
scrollbar-arrow-color: #000; /* 1 – цвет стрелки */;
scrollbar-track-color: #008000; /* 2 – цвет подложки */;
scrollbar-face-color: #32CD32; /* 3 - цвет самой полосы */;
scrollbar-shadow-color: #000; /* 4 – цвет разделяющей полосы */;
scrollbar-highlight-color: #000; /* 4 - цвет разделяющей полосы */;
scrollbar-3dlight-color: #32CD32; /* 5 - цвет внешних границ полосы */;
scrollbar-darkshadow-color: #32CD32; /* 5 - цвет внешних границ полосы */;
}

Результат:

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

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

::-webkit-scrollbar { /* 1 - скроллбар */ }
::-webkit-scrollbar-button { /* 2 - кнопка */ }
::-webkit-scrollbar-track { /* 3 - трек */ }
::-webkit-scrollbar-track-piece { /* 4 - видимая часть трека */ }
::-webkit-scrollbar-thumb { /* 5 - ползунок */ }
::-webkit-scrollbar-corner { /* 6 - уголок */ }
::-webkit-resizer { /* 7 - изменение размеров */ }

СХЕМА ПАРАМЕТРОВ:

  1. webkit-scrollbar - скроллбар
  2. webkit-scrollbar-button - кнопка
  3. webkit-scrollbar-track - трек
  4.  webkit-scrollbar-track-piece  - видимая часть трека
  5. webkit-scrollbar-thumb - ползунок
  6. webkit-scrollbar-corner – уголок
  7. webkit-resizer - изменение размеров

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

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

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

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

Пример:

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

::-webkit-scrollbar{ width: 22px; /* 1 - вертикальный скроллбар */}
::-webkit-scrollbar:horizontal{ height: 22px; /* 1 - горизонтальный скроллбар */}
::-webkit-scrollbar-button {background: #008000; /* 2 - кнопка */}
::-webkit-scrollbar-track {background: #008000;/* 3 - трек */}
::-webkit-scrollbar-track-piece { background: #32CD32; /* 4 – видимая часть трека */ }
::-webkit-scrollbar-thumb {background: #008000; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 5 - ползунок */}

Результат:

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

 

 

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

8 Ответов на комментарий - Изменить полосу прокрутки на CSS

  1. user4417

    Здравствуйте,
    обновилась мозила до 50, а в ней проблема с полосой прокрутки,
    обычно держу мышь крайне вправо и щелкаю не глядя,
    каждый щелчок прокручивает страницу на длину монитора (вверх или вниз),
    теперь же куда кликну – туда бегунок и улетает, и с ним вся страница,
    приходится переводить взгляд на полосу, цеплять бегунок мышью и медленно таскать вдоль страницы.
    Неудобно – это не то слово!!!!!!!!!! :evil:
    Как можно это настроить?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    :|

    Ответить

    user4417 отвечает:

    А! нашла решение, :!: это был баг 1260067,
    и надо было упомянуть, что это для линукса,
    очень может быть, что для винды такой проблемы нет… не знаю, я туда несколько лет не заглядывала. :roll:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    И как Вы решили проблему? Может кому-то пригодится.

    Ответить

    user4417 отвечает:

    Да, действительно, что это я… :oops:
    Пожалуйста, сотрите белиберду из предыдущего поста,
    поставьте туда вот это:
    в файл gtk-3.0/settings.ini нужно вписать gtk-primary-button-warps-slider=false

  2. Тимур

    Автор, добрый вечер.
    Opera ещё в 2014-ом использовала движок WebKit, когда они её перевели на него – не знаю. Но сам проверь псевдоклассами – -webkit- любой стиль применив в консоли, сам увидишь результат.
    Так что Опера больше 2-х лет ТОЛЬКО поддерживает это всё. Да и об этом на форумах многих написано, я ещё в начале 2014-го читал что опера перешла полностью на WebKit.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Тимур!
    Да, вы правы, я обновил браузер ОПЕРА и действительно, все ок.
    Спасибо, что поправили меня.
    Удачи!

    Ответить

    Тимур отвечает:

    :!: и вам ))

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 750
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4136