Div Горизонтальная полоса прокрутки

Question

Я создал горизонтальную галерею для сайта клиента, который функционирует достаточно хорошо, не самый лучший способ для галереи, но это то, что они хотели:

http://www.lisagleeson.com/galleries/fashion/

Это было сделано с использованием следующих код:

#galleryWrapper { 
height: 525px; 
width: 100%; 
background-color: #ffffff; 
padding: 10px 0px 10px 0px; 
float: left; 
white-space: nowrap; 
overflow-y: hidden; 
overflow-x: scroll; 
} 

Они сообщают, что это немного трудно прокручивать эти изображения слева направо, часть это потому, что нет полосы прокрутки в DIV. Мне нужна помощь в том, как добавить эту полосу прокрутки, не переходя к использованию iFrame.

Answer 1

В вашем случае вы можете сделать «индикатор выполнения», на котором будет отображаться текущая позиция прокрутки, что-то вроде полосы прокрутки. Слушайте событие scroll на слайдере и обновляйте позицию индикатора выполнения. Если вы не планируете двухстороннее взаимодействие (перетащите этот индикатор выполнения и ползунок прокрутки), тогда код JS будет прост.

Я вижу только одна проблема здесь - дизайн Progress Bar :) Есть много примеров, прогресс бар - полоса прокрутки с дорожки, простой прокрутки, пейджинг radiobuttons и т.д ...

Если вы хотите сделать scrollbar draggable, вы можете использовать jQuery Scrollbar, который скрывает собственную полосу прокрутки, но все же позволяет прокручивать мышью/касанием (а не эмуляцию JS!). Полосы прокрутки полностью настраиваются на CSS.