Делаем горизонтальный скроллбар

05 08/10
24

После публикации статьи «Делаем вертикальный скроллбар» многие спрашивали по поводу аналогичного, но горизонтального варианта. В этой статье рассмотрим пример создания простой горизонтальной полосы прокрутки.

Для создания будет использоваться jQuery плагин jScrollHorizontalPane.

Контент, который будет скроллиться, нужно обернуть в блок. В данном случае #scroll-box.

1
2
3

<div id="scroll-box">
    <!-- Контент -->
</div>

Подключаем CSS файл плагина jScrollHorizontalPane.css, и пишем следующие стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#scroll-box{
    width:300px;
    height:150px;
    overflow:hidden;
    float:left;
}
#scroll-box p{
    width:1000px;
}
a.jScrollArrowLeft{
    height:20px;
}
a.jScrollArrowRight{
    height:20px;
}

У контента ширина должна быть больше, чем у внешнего блока.

Подключаем скрипты:

1
2
3

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jScrollHorizontalPane.min.js"></script>
1
2
3
4
5
6
7
8

$(function(){
    $('#scroll-box').jScrollHorizontalPane({
        showArrows:true,
        arrowSize:20,
        scrollbarHeight:20,
        scrollbarMargin:0
    });
});

Здесь используются следующие параметры:

  • showArrows — отвечает за отображение кнопок «Назад» «Вперёд» на полосе прокрутки
  • arrowSize — ширина этих кнопок в px (если не указана здесь, должна быть установлена в CSS)
  • scrollbarHeight — высота полосы прокрутки в px
  • scrollbarMargin — отступ справа от полосы прокрутки
Теги: • • •