для Firefox или кросс-браузер вы можете использовать:
jQuery пользовательский контент-скроллер
более простой и легкий в использовании
Github: https://github.com/malihu/malihu-custom-scrollbar-plugin
Как использовать:
Загрузите источник из Интернета или Github.
Включите в заголовок jquery.mCustomScrollbar.concat.min.js и jquery.mCustomScrollbar.css.
Добавьте класс mCustomScrollbar к любому элементу, для которого вы хотите добавить собственные полосы прокрутки с параметрами по умолчанию. Пример моего:
<div class="long40 right reviews-frame mCustomScrollbar">
Вызовите функцию mCustomScrollbar в селекторе элементов, для которого вы хотите добавить полосы прокрутки. Я звоню внизу моей страницы phtml (list.phtml) так:
....
</div>
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>
Прочие настройки и документацию вы читаете на их сайте.
Пример, который я использовал в Magento: i.imgur.com/3OwGQld.png
Следующий пример кода CSS для цветной полосы прокрутки, который я изменил:
#mCSB_1_dragger_vertical {
height: 130px !important; /* height of the scrollbar */
}
.mCSB_dragger_bar {
background-color: #ececec !important; /* color of the dragger bar */
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
width: 10px !important; /* width of the dragger bar */
}
.mCSB_scrollTools .mCSB_draggerRail {
background-color: #888888 !important; /* color of the rail */
width: 10px !important; /* width of the rail for dragger bar */
}