jScrollPane.js – настраиваем внешний вид скроллбара » aka-edd - персональный блог

jScrollPane.js – настраиваем внешний вид скроллбара

автор: eddvrned | 24 мая 2010 | Просмотров: 1964

Бывают ситуации когда необходимо иметь полный контроль над внешним видом скроллбара. Например, необходимо украсить немного сайт, а именно полосой прокрутки в нужном блоке в стиле дизайна сайта.

В данном случае, при помощи 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();
   });

и необходимо подключить несколько файликов:

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Другие новости по теме: