Scroll Div 2

Layer 1 Layer 2 Layer 3 Layer 4 Layer 5 [Down || Up || Top ]

  1. For more information about the clip() attribute

  2. See clip on the style index page.
  3. Content One
  4. Content One
  5. Content One
  6. Content One
  7. Content One
  8. Content One
  9. Content One
  10. Content One
  11. Content One
  12. A list of text
  13. Content One
  14. Content One
  15. Content One
  16. Content One
  17. Content One
  18. Content One
In order to scroll the layers in a specific area of the page the scrolling layers are contained within a virtual box.
This box is created by nesting the scrolling layers within a DIV tag that controls the viewable area.

The viewable area is created using the clip(top,right,bottom,left) attibute. 

<script type="text/javascript">

var lastID=""
var currentID=""

function swapDiv(id){
elm=document.getElementById(id)
lastEl=document.getElementById(lastID)
elm.style.top=0 // set layer to top of container

if(lastID!=""&&lastID!=id){
lastEl.style.display="none"
}
elm.style.display="block"
lastID=id
currentID=id
currentEl=document.getElementById(currentID)
}

setTimeout("swapDiv('div1')",1000) // show initial layer

var timer=""
var speed=5
var scrollRate=3

function moveDown(){step=-scrollRate;dir=0;motion()}
function moveUp(){step=scrollRate;dir=1;motion()}

function motion(){
if(currentID==""){return}
clearTimeout(timer)
posnow=parseInt(currentEl.style.top)
if(dir==1&& posnow>-5 || dir==0&&posnow<-parseInt(currentEl.scrollHeight)
+parseInt(document.getElementById("clip_div").offsetHeight)){
cease()
}
else{
posnow+=step
currentEl.style.top=posnow
timer=setTimeout("motion()",5)
}
}

function cease(){
clearTimeout(timer)
}

function oTop(){
currentEl.style.top=0
}

</script>

<style>
#cont{
position:relative;
width:300px;
height:200px;
border:4px solid #bbc;
text-align:left
}

#clip_div{
position:absolute;
left:0px;
top:0px;
width:300px;
height:200px;
CLIP:rect(0px 300px 200px 0px)
}

#clip_div DIV{
position:absolute
}

</style>

<!--[if IE]>

<style>

#clip_div{
CLIP:rect(0px 292px 192px 0px)
}

#clip_div DIV{
width:292px;
}

</style>

<! [endif]-->

<a href="javascript:swapDiv('div1')">Layer 1</a> <a href="javascript:swapDiv('div2')">Layer 2</a> 
<a href="javascript:swapDiv('div3')">Layer 3</a> <a href="javascript:swapDiv('div4')">Layer 4</a> 
<a href="javascript:swapDiv('div5')">Layer 5</a> [ 
<a href="#null" onmouseover="moveDown()" onmouseout="cease()">Down</a> || 
<a href="#null" onmouseover="moveUp()" onmouseout="cease()">Up</a> || 
<a href="#null" onclick="oTop()">Top</a> ]

<DIV id="cont"> 

<DIV id="clip_div"> 

<div id="div1" style="display:block"> LAYER 1 CONTENTS </div>

<div id="div2" style="background-color: #AAAA00;display:none"> LAYER 2 CONTENTS </div>

<div id="div3" style="background-color: #FF0000;display:none"> LAYER 3 CONTENTS </div>

<div id="div4" style="display:none"> LAYER 4 CONTENTS </div>

<div id="div5" style="background-color:gold;display:none"> LAYER 5 CONTENTS </div>

</DIV>

</DIV>