Часто бывают ситуации когда необходимо сделать нестандартную полосу прокрутки у блока. Для решения этой проблемы я использую jQuery плагин
jScrollPane, с помощью которого можно легко создать любой скроллбар.
HTML разметка включает всего один внешний контейнер. Контейнер с id="scroll-wrap" в данном случае необходим лишь для позиционирования.
<body>
<div class="scroll-wrap">
<div class="scroll-pane">
....
</div>
</div>
</body>
.scroll-wrap{
width: 300px;
margin: 40px auto;
background: #F7F1E5
}
.scroll-pane{
width: 290px;
height: 200px;
padding: 0 0 0 10px;
overflow: hidden
}
a.jScrollArrowUp{
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
background:url(images/but.gif) no-repeat center top;
height:18px;
}
a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
background:url(images/but.gif) no-repeat center top;
height:18px;
}
.jScrollPaneDrag {
position: absolute;
cursor: pointer;
overflow: hidden;
background:url(images/drag.gif) no-repeat left top;
height:42px
}
Для работы плагина необходимо подключить следующие файлы:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="jScrollPane.css" />
Файл jquery.mousewheel.min.js необходим в том случае, если необходима поддержка прокрутки колесом мыши.
$(function()
{
$('.scroll-pane').jScrollPane({showArrows:true,scrollbarWidth:19,dragMaxHeight:43});
});
Параметр showArrows отвечает за отображение кнопок прокрутки, scrollbarWidth отвечает за ширину полосы, а dragMaxHeight за максимальную высоту перетаскиваемой панели.
Удобство и доступность
Лишая скроллбар его естественного вида, вы рискуете тем, что пользователи не смогут распознать в нем, элемент, которым они привыкли пользоваться. Нужно быть уверенным, что новый вид ассоциируется именно с полосой прокрутки. Якоб Нильсен написал неплохую статью «Scrolling and Scrollbars», в которой описал, что можно и что нельзя делать, когда дело касается настройки скроллбара. Учитывайте это когда будете применять данный способ.