Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.maindiv {
position:absolute;overflow:hidden;left:100px;top:100px;width:200px;height:400px;border:solid red 1px;
}
#maindiv{
position:absolute;width:200px;height:900px;border:solid red 1px;
}
.panel {
width:200px;height:100px;background-Color:#FFCC66;
}
#scrolldiv {
position:absolute;overflow:auto;left:180px;top:0px;width:20px;height:200px;
}
#scrolldiv DIV{
width:0px;height:400px;border:solid red 0px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function Scroll(s,id){
var max=(s.scrollHeight-s.offsetHeight),obj=document.getElementById(id),mmax=obj.offsetHeight-obj.parentNode.offsetHeight;
obj.style.top=-mmax*(s.scrollTop+.001)/max+'px';
}
/*]]>*/
</script>
</head>
<body>
<div class="maindiv" >
<div id="maindiv">
<div class="panel" >1</div>
<div class="panel" style="background-Color:#FFFFCC">2</div>
<div class="panel" >3</div>
<div class="panel" style="background-Color:#FFFFCC">4</div>
<div class="panel" >5</div>
<div class="panel" style="background-Color:#FFFFCC">6</div>
<div class="panel" >7</div>
<div class="panel" style="background-Color:#FFFFCC">8</div>
<div class="panel" >9</div>
</div>
<div id="scrolldiv" onscroll="Scroll(this,'maindiv');"><div></div></div>
</div>
</body>
</html>
scrollbar
Reply With Quote
Bookmarks