Custom Scrollbar H

This example shows how you can create a custom scrollbar to scroll the contents of a div.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris orci. Suspendisse aliquam, quam eu convallis pellentesque, felis velit blandit augue, vitae semper pede metus non nulla. Etiam eu eros in ligula euismod vestibulum. Aenean porttitor adipiscing metus.
Phasellus tellus nisi, viverra non, fringilla eget, tristique sit amet, felis. Vestibulum iaculis mauris non lectus. Suspendisse libero arcu, fermentum at, eleifend non, fringilla eu, lectus. Mauris sit amet tortor. Proin accumsan mauris sit amet mauris.
Maecenas cursus scelerisque diam. Integer felis. Suspendisse euismod venenatis nulla.
Sed vitae risus. Vivamus vitae augue et est aliquet malesuada. Vivamus sit amet dolor ac arcu posuere ullamcorper. Praesent faucibus augue sit amet quam. Integer viverra laoreet dui. Vestibulum semper odio auctor libero. Maecenas consectetuer, elit nec ornare luctus, diam odio feugiat felis, ut nonummy dolor sapien sed orci.
Curabitur ullamcorper, enim nec hendrerit tempus, magna elit sollicitudin leo, ut ullamcorper purus leo vel sapien. Integer enim est, dapibus dignissim, sodales quis, pharetra eu, arcu. Suspendisse rutrum aliquam felis. Curabitur eros quam, tincidunt non, imperdiet et, congue eu, velit.
Duis ut dui eget nisl aliquet dictum. Suspendisse volutpat. Proin consequat, nulla sed auctor venenatis, felis nisl sollicitudin arcu, eget imperdiet leo ante eget ante. Maecenas ornare. Fusce ac dolor. Morbi libero. Duis feugiat, tellus ut commodo congue, sapien tellus scelerisque metus, in porta enim elit a enim.
Cras vel metus non diam bibendum volutpat. Donec suscipit magna vitae augue. Integer vitae diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis blandit est a enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque eleifend posuere sapien. Proin posuere justo eu nisi. Nulla facilisi. Vestibulum fringilla pharetra nisi. Phasellus sapien nibh, viverra ac, imperdiet et, hendrerit sit amet, augue. Aenean sollicitudin consequat urna. Morbi pretium nisi id quam. Mauris vestibulum sagittis enim. Cras sit amet nunc in justo vestibulum facilisis.
Morbi ante purus, sagittis nec, pulvinar ac, blandit sed, nulla. Quisque tellus. Proin quis augue. In diam nisi, sodales non, pulvinar nec, condimentum eu, lectus. Aenean sit amet justo ac nibh condimentum porta. Maecenas sagittis quam dictum eros. Morbi vel tellus et nisl ultrices imperdiet. Sed libero nunc, tincidunt id, luctus et.
Pellentesque eu, enim. Cras fringilla. Aliquam tempus ultrices nisi. Nam vitae urna. Cras id dolor quis enim fringilla posuere. Etiam et turpis. Nunc tempus dolor quis metus. Nunc aliquam, ante non nonummy condimentum, dui odio cursus libero, quis tempus velit turpis eu neque.
Curabitur vitae nisl. Ut velit orci, fringilla vitae, sollicitudin quis, rhoncus ut, lectus. Quisque tristique tortor ut urna. Aliquam vel augue sit amet justo sollicitudin pharetra. Ut tortor mauris, tristique at, malesuada quis, porttitor vel, metus. Morbi a odio vitae magna venenatis consectetuer. Proin euismod neque.
Sed tortor nibh, mollis et, commodo a, molestie in, magna. Suspendisse dolor nulla, euismod ac, ultricies vel, egestas non, est. Suspendisse potenti. Nulla vel nunc. Morbi dapibus, nulla id laoreet adipiscing, urna dui dignissim pede, eu scelerisque magna est quis odio.

< <
> >

There are basically two parts to this effect, the scrolling display, and the scrollbar.

The scrolling display consists of a container div (scroll_container), a scrolling div (scroller), and the content divs (scroller div)

The width and height of the scroll_container are stated in the css rule scroll_container, the width of the scrolling div is dynamically calculated by the script. The default width of the content divs, as well as margin and padding etc, are stated in the css rule scroller div and are applied to all the content divs. If the margins are not required they must be set to zero in the css rule scroller div, you can also use inline css in any of the content divs to over-ride the default values.

The scrollbar is made up of a container div (slider_container) and a sliding div (slider)

The width of the slider_container is stated in the css rule slider_container
The image used for the slider is applied as the background for the sliding div, the width and height of the sliding div should be the same as the images width and height, you may also have to adjust the line-height in the css rule slider_container and font-size in the css rule slider

The scroller movement is relative to the slider movement so if the slider is moved to its right stop position the scroller is scrolled to its right stop position.

You can set the width of the scroll_container and the slider_container to suit as the script adjusts accordingly. 

<HTML>
<HEAD>
<TITLE>Custom Scrollbar H</TITLE>

<script type="text/javascript">

var moving=false
var leftStopOffset=0
var rightStopOffset=0

function initCSH(){
scrollContainer=document.getElementById("scroll_container")
theScroller=document.getElementById("scroller")

scrollerElements=theScroller.getElementsByTagName("div")
scrollerWidth=0
for(var i=0;i<scrollerElements.length;i++){
scrollerWidth+=scrollerElements[i].offsetWidth

if(document.body.currentStyle){
scrollerWidth+=parseInt(scrollerElements[i].currentStyle.marginLeft)
scrollerWidth+=parseInt(scrollerElements[i].currentStyle.marginRight)
}
else{
scrollerWidth+=parseInt(document.defaultView.getComputedStyle(scrollerElements[i], '').getPropertyValue("margin-left"))
scrollerWidth+=parseInt(document.defaultView.getComputedStyle(scrollerElements[i], '').getPropertyValue("margin-right"))
}

}

theScroller.style.width=scrollerWidth

sliderContainer=document.getElementById("slider_container")
theSlider = document.getElementById("slider")

scrollAmount=theScroller.offsetWidth-scrollContainer.offsetWidth
slideAmount=sliderContainer.offsetWidth-theSlider.offsetWidth-leftStopOffset-rightStopOffset

step=scrollAmount/slideAmount

theSlider.style.left=leftStopOffset

}

function prepCSHSlider() {
moving=true
posX = tempX - theSlider.offsetLeft
}

function moveCSHSlider(e) {
tempX = (!e ? event.clientX : e.clientX)

if(moving == true){
theSlider.style.left = (tempX - posX) + "px"

if(theSlider.offsetLeft<leftStopOffset){
theSlider.style.left=leftStopOffset
}

if(theSlider.offsetLeft+theSlider.offsetWidth>sliderContainer.offsetWidth-rightStopOffset){
theSlider.style.left=sliderContainer.offsetWidth-theSlider.offsetWidth-rightStopOffset
}

scrollerPos=(theSlider.offsetLeft-leftStopOffset)*step
theScroller.style.left= -scrollerPos

}

}

document.onmousemove = moveCSHSlider
document.onmouseup=new Function("moving=false")

// add  onload="initCSH()" to the opening body tag

</script>

<style type="text/css">

#scroll_container{
position:relative;
width:800px;
height:200px;
overflow:hidden;
border:1px solid #800000;
}

#scroller{
position:absolute;
left:0px;
top:0px;
}

#scroller div{
width:200px;
float:left;
margin-left:10px;
margin-right:10px;
padding:5px;
text-align:left;
border:1px solid black;
}

#slider_container{
position:relative;
width:400px;
height:14px;
line-height:12px;
text-align:left;
margin-top:20px;
border-top:1px solid #800000;
border-bottom:1px solid #800000;
}

#slider{
position:absolute;
width:68px;
height:14px;
font-size:5px;
background-image:url(scrollbar_handle.gif);
background-color:red;
}

</style>

<!--[if IE]>
<style type="text/css">
#slider_container{
height:16px
}

</style>
<! [endif]-->

</HEAD>
<BODY onload="initCSH()">
<h1><span>Custom Scrollbar H</span></h1>

<DIV id="scroll_container">

<DIV id="scroller">

<div>Add or remove content divs as required</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>

</DIV>

</DIV>

<br style="clear:both">

<DIV id="slider_container">

<div id="slider" onmousedown="prepCSHSlider()"></div>

</DIV>

<br style="clear:both">

</BODY>
</HTML>