Добавление цветной полоски позади скроллера

[Нарек]

Здравствуйте. Использую jQuery custom content scroller, вот отсюда  http://manos.malihu.gr/. появилась идея сделать так, что бы делать цветным пройденный путь скроллера где то вот так http://joxi.ru/b6bYU_3JTJBmDo5nNUE. Вот сижу думаю, ничего в голову не приходит, может кто то сделал уже, поделится) Буду очень благодарен.

JsFiddle http://jsfiddle.net/PY66D/, демо плагина можно увидеть тут  http://manos.malihu.gr/tuts/custom-scrollbar-plugin/max-width_example.html  нажать пару раз на Add Content.

Edited July 30, 2014 by Нарек

[hypnocolor]

http://jsfiddle.net/PY66D/4/

В CSS и JS комментарии перед добавленными мной строками.

Edited July 30, 2014 by hypnocolor

[Нарек]

Большое спасибо, то что нужно!

[hypnocolor]

Единственный момент: если убрать дополнительный контент так, что скроллбар исчезнет, а потом снова вызвать его появление, то длина красной линии останется прежней, это видно, ибо сам скроллбар прозрачный немного, но после скролла она опять будет принимать нормальные размеры. Полночь у меня уже, лень дописывать Надеюсь, принцип понятен.

[Нарек]

Единственный момент: если убрать дополнительный контент так, что скроллбар исчезнет, а потом снова вызвать его появление, то длина красной линии останется прежней, это видно, ибо сам скроллбар прозрачный немного, но после скролла она опять будет принимать нормальные размеры. Полночь у меня уже, лень дописывать Надеюсь, принцип понятен.

 

У меня он убираться не будет, да и стиль совсем другой скроллера) Да, смысл понятен, спасибо еще раз)

[hypnocolor]

 

Единственный момент: если убрать дополнительный контент так, что скроллбар исчезнет, а потом снова вызвать его появление, то длина красной линии останется прежней, это видно, ибо сам скроллбар прозрачный немного, но после скролла она опять будет принимать нормальные размеры. Полночь у меня уже, лень дописывать Надеюсь, принцип понятен.

 

У меня он убираться не будет, да и стиль совсем другой скроллера) Да, смысл понятен, спасибо еще раз)

 

Ну и это только для горизонтального скроллбара. Для вертикального, соответственно, в CSS полоски пути нужно ставить соответствующую высоту, ширину и положение относительно родной полоски скролла, а в коде опций плагина использовать this.mcs.draggerTop вместо this.mcs.draggerLeft. Не за что)

Edited July 30, 2014 by hypnocolor