Scroll Div

See also Swap n Scroll Top ScrollDown Scroll Up Bottom

Mouse over a Scroll link to scroll the contents of this div

Mouse out to stop

Click the Top or Bottom link to go directly to the top or bottom of this div

Dummy Text

End

The Script

<script type="text/javascript">

scrollStep=1

timerUp=""
timerDown=""

function toTop(id){
document.getElementById(id).scrollTop=0
}

function scrollDivDown(id){
clearTimeout(timerDown) 
document.getElementById(id).scrollTop+=scrollStep
timerDown=setTimeout("scrollDivDown('"+id+"')",10)
}

function scrollDivUp(id){
clearTimeout(timerUp)
document.getElementById(id).scrollTop-=scrollStep
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}

function toBottom(id){
document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight
}

function stopMe(){
clearTimeout(timerDown) 
clearTimeout(timerUp)
}

</script>

<style>
#display{
width:200px;
height:150px;
overflow:hidden;
text-align:left;
border:1px solid black;
}
</style>

HTML for the above example

<a href="#null" onclick="toTop('display')">Top</a>
<a href="#null" onmouseover="scrollDivDown('display')" onmouseout="stopMe()">ScrollDown</a>
<a href="#null" onmouseover="scrollDivUp('display')" onmouseout="stopMe()">Scroll Up</a>
<a href="#null" onclick="toBottom('display')">Bottom</a>

<div id="display">

<b>LAYER CONTENTS</b>

<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>End

</div>

Swap n Scroll

Top ScrollDown Scroll Up Bottom

By adding another function we can now swap the contents of the div and still have the scroll effect

Content One
Content One
Content One
Content One
Content One
Content One
Content One
Content One
Content One
A list of text
Content One
Content One
Content One
Content One
Content One
Content One

Content 1 Content 2 Content 3 Content 4

The layout for this is slightly different from the single scroll example because each of the content is in its own div which are nested within the display div.
The display property of the relevant content div is then swapped to either show or hide its content.

Add the following function to the script

lastID=""
function swapDiv(id){

if(lastID==""){
document.getElementById("display").getElementsByTagName("div")[0].style.display="none"
}

if(lastID!=""&&lastID!=id){
document.getElementById(lastID).style.display="none"
}

document.getElementById(id).style.display="block"
document.getElementById("display2").scrollTop=0

lastID=id
}

HTML for the Swap n Scroll example

<br> <br> 

<a href="#null" onclick="swapDiv('content1')">Content 1</a> 
<a href="#null" onclick="swapDiv('content2')">Content 2</a> 
<a href="#null" onclick="swapDiv('content3')">Content 3</a> 
<a href="#null" onclick="swapDiv('content4')">Content 4</a>

<br> <br> 

<DIV id="display">

<div id="content1" style="display:block">
Your Content One
</div>

<div id="content2" style="display:none">
Your Content Two
</div>

<div id="content3" style="display:none">
Your Content Three
</div>

<div id="content4" style="display:none">
Your Content Four
</div>

</DIV>

Note:
The css overflow property applied to the display div is set to hidden, this removes the scrollbar and still allows the contents to scroll in IE7, Mozilla, Firefox, Opera & NS8.
The scrolling does not work in NS7 unless the overflow is set to auto which also leaves the scrollbar showing in NS7
The following function should detect NS7 and change the overflow property for that browser

onload=function(){
browser=navigator.userAgent.toLowerCase()
if(browser.indexOf("netscape/7")!=-1){
document.getElementById("display").style.overflow="auto"
}
}