Scrollbars

The example scrollbars are created using divs and can be positioned anywhere within the page.
The incrementation of the scrollbar can be set to implement statements.
1




0
1
1

This example has a
greater scrolling distance
between increments because
the buffers height is set at
2000px

A scroll bar is made up of 2 divs, a container div and a nested buffer div.
The container div sets the overall height and/or width of the scrollbar area.
The buffer div sets the amount of scroll and affects the size of the scrollbar face (moveable part), this should always be set higher than the appropriate container size, increasing the buffer size creates a smaller scrollbar face with more scroll.

The number of increments is set at variable incrementsW or incrementsH, the script can then be set to do something at each increment.

Horizontal Example

The text highlighted in blue refers to the action of the scrolling 

<script type="text/javascript">

notIE=document.getElementById&&!document.all

function initScrollbarW(){

if(notIE){document.getElementById("containerW").style.overflow="auto"}
else{document.getElementById("containerW").style.overflowX="auto"}

containerWidth=document.getElementById("containerW").offsetWidth
bufferWidth=document.getElementById("bufferW").offsetWidth
incrementsW=5
divisorW=(bufferWidth - containerWidth) / (incrementsW-1)
}



myarray=new Array()
myarray[0]="This is an experiment to create scrollbars"
myarray[1]="To select text to fill this textbox"
myarray[2]="Below are other examples using images,"
myarray[3]="multiple textboxes, and"
myarray[4]="highlighting the background of divs"


function runScrollbarW(){
scrollX = document.getElementById("containerW").scrollLeft
position = parseInt(scrollX / divisorW)


if(position==0){document.getElementById("t1").value=myarray[0]}
if(position==1){document.getElementById("t1").value=myarray[1]}
if(position==2){document.getElementById("t1").value=myarray[2]}
if(position==3){document.getElementById("t1").value=myarray[3]}
if(position==4){document.getElementById("t1").value=myarray[4]}

document.getElementById("display1").innerHTML=position+1


}

// add onload="initScrollbarW()" to the opening BODY tag

</script>


<div id="display1">1</div><br>

<input type="text" value="This is an experiment to create scrollbars" id="t1" style="width:300px"><br>


<div id="containerW" style="width:300px;height:20px" onscroll="runScrollbarW()">

<div id="bufferW" style="width:600px;height:18px"></div>

</div>

Vertical Example

<script type="text/javascript">

notIE=document.getElementById&&!document.all

function initScrollbarH(){

if(notIE){document.getElementById("containerH").style.overflow="auto"}
else{document.getElementById("containerH").style.overflowY="auto"}

containerHeight=document.getElementById("containerH").offsetHeight
bufferHeight=document.getElementById("bufferH").offsetHeight
incrementsH=5
divisorH=(bufferHeight - containerHeight) / (incrementsH-1)
}

function runScrollbarH(){
scrollY = document.getElementById("containerH").scrollTop
position = parseInt(scrollY / divisorH)


if(position==0){document.getElementById("div1").style.backgroundColor="#008000"}
else{document.getElementById("div1").style.backgroundColor=""}

if(position==1){document.getElementById("div2").style.backgroundColor="#008000"}
else{document.getElementById("div2").style.backgroundColor=""}

if(position==2){document.getElementById("div3").style.backgroundColor="#008000"}
else{document.getElementById("div3").style.backgroundColor=""}

if(position==3){document.getElementById("div4").style.backgroundColor="#008000"}
else{document.getElementById("div4").style.backgroundColor=""}

if(position==4){document.getElementById("div5").style.backgroundColor="#008000"}
else{document.getElementById("div5").style.backgroundColor=""}

document.getElementById("display4").innerHTML=position+1


}

// add onload="initScrollbarH()" to the opening BODY tag

</script>


<div id="display4">1</div><br>

<div style="width:120px;float:left;text-align:left">
<div id="div1">Hello World</div>
<div id="div2">Example Text</div>
<div id="div3">Dummy Text</div>
<div id="div4">Meaningless Text</div>
<div id="div5">Ditto</div>
</div>


<div id="containerH" style="width:20px;height:110px;float:left;margin-left:30px" onscroll="runScrollbarH()">
<div id="bufferH" style="height:220px"></div>
</div>