Бывают ситуации когда необходимо иметь полный контроль над внешним видом скроллбара. Например, необходимо украсить немного сайт, а именно полосой прокрутки в нужном блоке в стиле дизайна сайта.
В данном случае, при помощи javascript и его возможностей. Используя jQuery плагин jScrollPane, можно легко настроить внешний вид полосы прокрути по своему вкусу.
Пример использования данного скрипта можно посмотреть здесь.
HTML:
...
CSS:
.scroll-pane {float:left;height:205px;overflow:auto;width:450px}
.jScrollPaneContainer {z-index:1;position:relative;overflow:hidden;margin:10px 20px 0px 50px}
.jScrollPaneContainer p{margin:0 20px 0 0px;padding:0 5px 0 5px;background:#F5FF02}
.jScrollPaneTrack {background: url(files/bg.png) center no-repeat;height:100%;cursor:pointer;right:0px;position:absolute;top:0px;width:20px}
.jScrollPaneDrag {position:absolute;background: url(files/z.png) center no-repeat;overflow:hidden;cursor:pointer;width:20px}
JScript:
$(function()
{
$('#pane1').jScrollPane();
});
и необходимо подключить несколько файликов:
Компьютерная помощь
Ремонт компьютеров
Ремонт ноутбуков
Ремонт планшетов
Ремонт apple
Веб-мастерская
Заправка картриджей