После публикации статьи «Делаем вертикальный скроллбар» многие спрашивали по поводу аналогичного, но горизонтального варианта. В этой статье рассмотрим пример создания простой горизонтальной полосы прокрутки.
Для создания будет использоваться 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— высота полосы прокрутки вpxscrollbarMargin— отступ справа от полосы прокрутки
Спасибо, очень классная фишка!
Видел подобный скролл на нескольких сайтах, хотел и себе такое… Теперь буду прикручивать ))
Горизонтальная прокрутка всех раздражает.
Зачем это нужно?
Честно говоря, зачем нужно делать именно горизонтальный скролл, сам не совсем понимаю.
Но раз существует плагин и просьбы показать пример, видимо всё таки кому-то нужно.
Не понял, вроде dimensions давно в core
Я не в курсе. С какой версии dimensions в core уже?
Вы правы, спасибо. С 1.2.6 уже в core. Поправил пост.
А если нужно, чтобы контент был динамическим? Что тогда делать с шириной контента?
Сделайте общий блок для контента с нужной шириной и подгружайте контент в него.
«Тормоз, Горизонтальная прокрутка всех раздражает.»
«Alex, Честно говоря, зачем нужно делать именно горизонтальный скролл, сам не совсем понимаю.»
Не знай, меня вот такая прокрутка не раздражает: _http://www.apple.com/mac/
А как быть, если нужно такой скролбар сделать в колонке с резиновой шириной?
вопрос -аналогичный предыдущему:
как быть если размер контента неизвестен?
Нашел ответ:
ширину контента не указываем!
#scroll-box p{
}
а в параметры скролера добавляем параметр: resize: true
$(function(){
$(‘#scroll-box’).jScrollHorizontalPane({
showArrows:true,
arrowSize:20,
scrollbarHeight:20,
scrollbarMargin:0
<bresize: true</b
});
});
А по-моему, надо вмеру сочетать и горизонтальную и вертикальную прокрутки.
А какие параметры отвечают за высоту блока? допустим мне нужно вставить картинку на определенную высоту.
спс заранее
все) разобрался) не в ксс а в хеде нужно прописывать
День добрый. Появилась следующая проблема, выводится галерея в горизонтальном виде. И при первой загрузке страници скрол бар не позволяет отображать все содержимое. После обновления страници все работате как надо о0. сайт raduka.com Не подскажете в чем может быть проблема?
Отличный скролл, спасибо =)
Спасибо за пример
горизональная прокрутка- -извращение
горизонтальная прокрутка подобного типа в некоторых проектах просто необходима!!!
А можна ли этот скрипт настроить так, чтобы прокручиваемый контент был снизу, а скроллер сверху?
2Василий: в стилях bottom сменить на top
вопрос: у меня скролл не робит, гугл выдает: «Uncaught TypeError: Cannot read property ‘left’ of null»
jScrollHorizontalPane.min.js на 92 строке
что не так?