Js特效--模仿滚动条（兼容IE8+,FF,Google）

时间：2021-05-28 04:04:59
<html>

<head>

  <style>

   *{margin:0px;padding:0px;}

   #box{width:200px;height:500px;position:fixed;top:50px;left:200px;border:1px solid #000; overflow:hidden; }

   #box2{position:absolute;left:0px;top:0px;width:200px;height:720px;border:1px solid #000;}

  </style>

</head>

<body>

   <div id="box">

   	  <div id="box2">

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  </div>

   </div>

  <script>

      var box2=document.getElementById("box2");

      var box=document.getElementById("box");

      //非火狐

      var scrollFn=function(e){

      	var e=e||window.event;

      	var down=true;

      	down=e.wheelDelta?e.wheelDelta<0:e.detail>0;

      	if(down){ //不管ff还是其他浏览器，确定方向向下

      	  if(box2.offsetTop<0){

          box2.style.top=box2.offsetTop+10+"px";

              }else{  box2.style.top=0+"px";}

        }else{   //方向向上

        	if(box.offsetTop-box2.offsetTop<220){

          box2.style.top=box2.offsetTop-10+"px";

               }else{

                      box2.style.top=-220+"px";

               }

          }

      	}

     //为指定dom对象指定事件响应类型并绑定函数

      function addEvent(obj,xEvent,fn) {

        if(obj.attachEvent){

            obj.attachEvent('on'+xEvent,fn);

        }else{

            obj.addEventListener(xEvent,fn,false);

        }

    }

      addEvent(box,'mousewheel',scrollFn);

      addEvent(box,'DOMMouseScroll',scrollFn); //兼容火狐语句

  </script>

</body>

</html>

相关文章