jQuery + iDrag Scrollbar demo
Here's how it works
You need to grab jQuery
Here
You need to grab Interface (idrag)
Here
And you need to use this little snippit of code for your javascript:
<![CDATA[
var containerHeight = 0;
var scrollCotent = '';
function getContainerHeight(o) {
containerHeight = $(o).parent().height();
containerHeight -= 20;
}
function getScrollContent(o) {
sc = $(o).next();
sch = sc.height();
}
$(document).ready( function() {
$('.scroll-handle').Draggable(
{
zIndex: 1000,
containment: 'parent',
axis: 'vertically',
opacity: 0.7,
onStart: function() {
getContainerHeight( this );
getScrollContent( this )
},
onDrag : function(x,y)
{
var move = sch - containerHeight;
if(y>0 && y<(containerHeight))
sc.top(- y/containerHeight*move + "px");
return {x: x,y: y}
}
}
);
});
]]>
And setup your HTML like this:
<![CDATA[
<span class="scroll-container">
<span class="scroll-handle"></span>
<span class="scroll-contents">
<span class="sortabledropitem"><img src="thumb2.jpg" align="left" ></span>
<span class="sortabledropitem"><img src="thumb3.jpg" align="left" ></span>
<span class="sortabledropitem"><img src="thumb2.jpg" align="left" ></span>
<span class="sortabledropitem"><img src="thumb3.jpg" align="left" ></span>
<span class="sortabledropitem"><img src="thumb2.jpg" align="left" ></span>
<span class="sortabledropitem"><img src="thumb3.jpg" align="left" ></span>
<span class="sortabledropitem"><img src="thumb2.jpg" align="left" ></span>
</span>
</span>
]]>
That's it!