如题。但是还有些小问题,希望发现的大神一起帮忙解决
代码如下<!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">
 <head>
  <title> new document </title>
 <style type="text/css">
 html,body{
 width:100%;
 height:100%;
 }
 div,body{
 margin:0px;
 padding:0px;
 }
 
 #show1{
 background-color:red;
 margin:10px;
 width:53px;
 height:120px;
 color:white;
 float:left;
 } #show2{
 background-color:red;
  margin:10px;
  width:150px;
 height:60px;
 color:white; 
 position:absolute;
 }
 
  #show3{
  margin:10px;
  width:500px;
 color:white;
 float:left;
 }
 
 .x120div{
 background-color:red;
 margin:0px;
 padding:0px;
 width:700px;
 height:60px;
 color:white;
 }
 </style>
 </head>
 
 
<script type="text/javascript">window.onload = function () {
            var element = window;
var showheight=0;
var maxheight=document.body.scrollHeight;
var fianlScreen=document.body.offsetHeight ;
            if (element.addEventListener) {   //FireFox
                element.addEventListener("DOMMouseScroll", function (event) {
                    mousewheel(event);
                });
            }
            else {         //IE、Chrome 
                element.onmousewheel = function (event) {
                    mousewheel(event);
                }
            }

            var mousewheel = function (ev) {
                var ev = window.event || ev;
var show=document.getElementById("show2");
                var scrollTop = element.scrollTop;
                var scrollHeight = element.scrollHeight;
                var height = element.clientHeight;
                var delta = ev.type == 'DOMMouseScroll' ? ev.detail * 34 : ev.wheelDelta;
showheight+=delta;
if(showheight<0){
  showheight=1;
}else if(showheight>maxheight-fianlScreen){
  showheight=maxheight-fianlScreen;
}
show.style.top=showheight+"px";           
            }
        }
</script>
 <body>
  <!--<div onscroll="document.getElementById('f').style.top=this.scrollTop+'px'" 
  style="height:80px;width:100px;overflow:auto;border:1px solid #000;">
  1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>
  1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>
  <div id="f" style="height:10px;width:10px;background:red;position:absolute;top:0"></div>
  </div>-->
  <div id="show2"></div>
  <div id="show3">
<div class="x120div" style="background-color:#FF44AA ;">1</div>  
<div class="x120div" style="background-color:#FF3333 ;">2</div>  
<div class="x120div" style="background-color:#FF7744 ;">3</div> 
<div class="x120div" style="background-color:#FFAA33;">4</div>  
<div class="x120div" style="background-color:#FFCC22;">5</div>  
<div class="x120div" style="background-color:#FFFF33;">6</div>
<div class="x120div" style="background-color:#CCFF33;">7</div>  
<div class="x120div" style="background-color:#99FF33;">8</div>  
<div class="x120div" style="background-color:#33FF33;">9</div>
<div class="x120div" style="background-color:#33FFAA;">10</div> 
<div class="x120div" style="background-color:#33FFFF;">11</div> 
<div class="x120div" style="background-color:#33CCFF;">12</div>
<div class="x120div" style="background-color:#5599FF;">13</div> 
<div class="x120div" style="background-color:#5555FF;">14</div> 
<div class="x120div" style="background-color:#7744FF;">15</div>
<div class="x120div" style="background-color:#FF44AA ;">1</div>  
<div class="x120div" style="background-color:#FF3333 ;">2</div>  
<div class="x120div" style="background-color:#FF7744 ;">3</div> 
<div class="x120div" style="background-color:#FFAA33;">4</div>  
<div class="x120div" style="background-color:#FFCC22;">5</div>  
<div class="x120div" style="background-color:#FFFF33;">6</div>
<div class="x120div" style="background-color:#CCFF33;">7</div>  
<div class="x120div" style="background-color:#99FF33;">8</div>  
<div class="x120div" style="background-color:#33FF33;">9</div>
<div class="x120div" style="background-color:#33FFAA;">10</div> 
<div class="x120div" style="background-color:#33FFFF;">11</div> 
<div class="x120div" style="background-color:#33CCFF;">12</div>
<div class="x120div" style="background-color:#5599FF;">13</div> 
<div class="x120div" style="background-color:#5555FF;">14</div> 
<div class="x120div" style="background-color:#7744FF;">15</div>
  </div>
 </body>
</html>HTMl