Тема jScrollPane с CSS

Question

Я хочу извиниться за мой плохой английский, надеюсь, вы поймете, что я хочу:

Я недавно использовал плагин jquery 'jScrollPane' на моем сайте malossane.fr/sqf/.Все в порядке, но я, похоже, не смог сделать единственное небольшое изменение, которое хотел.На самом деле, идея очень проста, но мой уровень сценариев CSS очень плохой.

Сейчас у меня есть что-то вроде этого: http://malossane.fr/usb-file-723

И я хочу что-то подобное: Что я хочу

На самом деле, я хочу, чтобы .jspDrag был больше, чем .jspVerticalBar, который должен иметь ширину 5 пикселей.Но если я добавлю ширину 5px для вертикальной черты, ширина .jspDrag также станет равной 5px, хотя я хочу, чтобы он остался на 16px.

Может ли кто-нибудь помочь мне?Большое спасибо, Тим

Answer 1

Есть несколько возможных решений:

1. Вы можете использовать фоновое изображение на .jspTrack, которое является требуемой шириной и центрируется, например,

   .jspTrack
   {
       background: #fff url(/path/to/image.png) repeat-y 5px 0;
   }
   

   Таким образом, даже через .jspTrack есть ширина .jspDrag, его фон делает его менее широким.

2. Вы можете попробовать использовать отрицательные поля на .jspDrag, чтобы вытянуть его за пределы .jspTrack, например,

   .jspVerticalBar .jspTrack
   {
       width: 5px;
       background: #c4c4c4;
   }
   .jspVerticalBar .jspDrag
   {
       margin: 0 -5px;
       width: 15px;
       background: #363636
   }
   

   Возможно, вы могли бы использовать left вместо отрицательного поля.

Оба эти решения не проверены, но они должны дать вам хорошее начало ...

Answer 2

Я не знаю много об этом плагине, но могу дать вам решение установить цвет .jspVerticalBar на прозрачный или тот же цвет, что и на фоне и поставить другую вертикальную полосу (поддельную.) Прямо на .jspVerticalbar такчто это выглядит как то, что вы хотите