» »

Меняем прокрутку на сайте с помощью CSS


Статья полностью будет посвящена прокрутке на вашем сайте, как можно заметить, на каждом браузере она по своему дизайн разная, но мы сделаем свою оригинальную. Все будет на стилях сделано и JavaScript здесь совершенно не нужен. И вы сможете потом сами выставить как оттенок цвета, так отрегулировать как вам нужно, возможно под саму гамму интернет ресурса.

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



И так давайте разберемся, что за что какие стили у нас отвечать будут.

И начнем самого стиля, который ставим в CSS:

Код
::-webkit-scrollbar-button {background-image:url('');  
background-repeat:no-repeat;  
width:6px;  
height:0px}  

::-webkit-scrollbar-track {background-color: #737270;box-shadow: 0px 0px 3px #8E8E8E inset;}  

::-webkit-scrollbar-thumb {  
-webkit-border-radius: 5px;  
border-radius: 5px;background-color: #65AFEC;  
box-shadow:0px 1px 1px #fff inset;  
background-image:url('http://zornet.ru/Ajaxoskrip/Aster/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;}


1) И для начала разберем оттенок дорожки, где сам бегунок вверх и вниз будет ходить.

Нм нужно найти этот стиль - background-color: #737270; и как понимаете ставим тот который вам нужен оттенок.

2) Переходим к самому бегунку, который идет светло синий, и там также можно убрать углы.

За это отвечает:

Код
border-radius: 5px;
background-color: #65AFEC;


Здесь border-radius отвечает за закругление, и там поставлена 5 пикселей.
Но а background-color: отвечает за сам оттенок, здесь каждый может поставить свой, идет одной гаммой.

Что по ширине, сейчас стоит на 4px, как понимаете, чем больше цифра и тем шире и наоборот.

За все ответ несет этот стиль.

Код
::-webkit-scrollbar{
width: 4px;
}


Но думаю самые основные прописаны, также можно сделать, чтоб при наведение как то немного менялся, но не вижу причины так создавать.

Просто чтоб вы понимали, как все можно выстраивать.



Надеюсь все понятно написано, также есть комментарий, то можете задавать вопросы, больше такой скрипт подойдет на красочные сайты, как игровой или кино сайт, возможностей у него много.
20.07.2016 Просмотров: 462 Комментарий: (6)

Поделиться в социальных сетях

Материал разместил

Комментарий: 6
FeStemBer
FeStemBer 20.07.2016 21:351
0
Так нормально смотрится, но явно лучше, чем делают, что точно, не зацепить, так вообще бы убрали.
Kosten
Kosten 21.07.2016 04:124
0
Но наверно ее убирать и будут, так как может не пройти мобильную проверку, хотя там вообще не понять. Указывали на шрифт, в шапке что то сделал по дизайн, и все нормально со шрифтом стало.
Brung
Brung 20.07.2016 21:402
0
На темном фоне очень ярко будет смотреться.
Kosten
Kosten 20.07.2016 21:463
0
Кто сказал, что ярко будет, если дизайн яркий, то думаю это нормально, если нет, то кнопку яркую не делайте, стили вывел, где можно изменить цвет на свой.
Maryges
Maryges 21.07.2016 04:145
0
Вот искал прокрутку и найти не могу, также в желтом цвете и на этом сайте, она намного красивей, на старом сайте стояла на темном дизайне, вообще подошла как нужно, и эта чем то только цветом похоже.
feliksteg
feliksteg 22.07.2016 01:456
0
Вот здесь согласен, что прокрутку эту менять давно нужно. Вот как только адаптация отреагирует, там ведь все учитывается и даже ширина этого скрол.
avatar