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

05 08/10
24

После публикации статьи «jQuery: Настраиваем внешний вид скроллбара» многие спрашивали про аналогичный пример, но с горизонтальной полосой прокрутки. Собственно вот и он.

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

Контент, который будет «скроллиться», необходимо обернуть в блок:

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 — отступ справа от полосы прокрутки
Теги: • • •