Crossbrowser content scroller with custom look

Question

There is a block with horizontal scroll

<div class="popular-items">
<div class="popular-wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div><!-- .popular-wrapper -->
</div><!-- .popular-items-->

.popular-items {
clear: both;
overflow: hidden;
}   
.popular-wrapper {
clear: both;
overflow-x: scroll;
overflow-y: hidden;
}
.popular-items ul {
 width: 1200px;
}
.popular-items li {
width: 238px;
height: 440px;
float: left;
text-align: center;
border: 1px solid red;
}

http://jsfiddle.net/DjHRs/3/

The problem is the scroll bar has to look exactly like this one

How can I replace the standart scroll with custom one? May be there are some jQuery plugins? Or any other solutions?

Appreciate any help.

Answer 1

For this job I usualy use this plugin: http://jscrollpane.kelvinluck.com/ (there are demos for vertical and horizontal scroll)

Easy and customizable. (but it may take a little more work to make that green line)

Answer 2

I solved the problem using jQuery Ui Slider

<div class="scroll-pane">
    <ul class="scroll-content">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="scroll-bar-wrap"><div class="scroll-bar"></div></div>
</div>

.scroll-pane {
overflow: hidden;
width: 714px;
padding: 0 0 20px;
float:left;
}
.scroll-content {
width: 1190px;
float: left;
}
.scroll-content li {
width: 238px;
height: 440px;
float: left;
text-align: center;
}
.scroll-bar-wrap {
clear: left;
width: 672px;
height: 11px;
padding: 4px 4px 0;
margin: 0 auto;
background: #ede9d6;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-moz-box-shadow: inset 1px 1px 2px #a8a598;
-webkit-box-shadow: inset 1px 1px 2px #a8a598;
box-shadow: inset 1px 1px 2px #a8a598;
}
.scroll-bar {
position: relative;
}
.scroll-bar-wrap .ui-slider {
width: 672px;
height: 8px;
border-bottom: 1px solid #faf9f4;
background: #00ca52;
position: relative;
cursor: pointer;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-moz-box-shadow: inset 1px 1px 2px #009b41;
-webkit-box-shadow: inset 1px 1px 2px #009b41;
box-shadow: inset 1px 1px 2px #009b41;
  }
 .scroll-bar-wrap .ui-slider-handle {
width: 23px;
height: 23px;
top: -7px;
margin-left: -11px;
position: absolute;
background: url(http://640miles.com/html-test/mm/drag.png) no-repeat;
border: none;
cursor: pointer;
}
.ui-slider .ui-slider-range {
height: 8px;
background: #adadad;
border-bottom: 1px solid #faf9f4;
border-radius: 4px 0 0 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
-moz-box-shadow: inset 1px 1px 2px #848484;
-webkit-box-shadow: inset 1px 1px 2px #848484;
box-shadow: inset 1px 1px 2px #848484;
}

$(function() {

//scrollpane parts
var scrollPane = $( ".scroll-pane" ),
scrollContent = $( ".scroll-content" );

//build slider
var scrollbar = $( ".scroll-bar" ).slider({
    range: "min",
            min: 0,
            max: 100,
    slide: function( event, ui ) {
        if (scrollContent.width() > scrollPane.width() ) {
            scrollContent.css( "margin-left", Math.round(
            ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + "px" );
        } else {
            scrollContent.css( "margin-left", 0 );
        }
    }
});

});

http://jsfiddle.net/DjHRs/5/