鼠标滚轮滚动事件，兼容IE8和火狐、谷歌

95 阅读 0 评论 63 点赞

我是靠谱客的博主认真铅笔，最近开发中收集的这篇文章主要介绍鼠标滚轮滚动事件，兼容IE8和火狐、谷歌，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           #box1{
               width: 100px;
               height: 100px;
               background-color: #007AFF;
           }
           body{
               height: 2000px;
           }
       </style>
       <script type="text/javascript">
           window.onload = function(){
               var box1 = document.getElementById("box1");
               box1.onmousewheel=function(event){
                   var event = event || window.event;//兼容ie
                   if(event.wheelDelta > 0 || event.detail < 0){//兼容火狐detail
                       console.log("向上滚动了！");
                       box1.style.height = box1.clientHeight > 10 ? box1.clientHeight - 10 + "px" : box1.clientHeight;
                   }else{
                       console.log("向下滚动了！");
                       box1.style.height = box1.clientHeight + 10 + "px";
                   };
                   event.preventDefault && event.preventDefault();//兼容火狐
                   return false;
               };
               bind(box1,"DOMMouseScroll",box1.onmousewheel);//兼容火狐DOMMouseScroll
               //封装监听事件函数
               function bind(obj,methds,callback){
                   if(obj.addEventListener){
                       obj.addEventListener(methds,callback,false);
                   }else{
                       obj.attachEvent("on" + methds, function(){
                           callback.call(obj);
                       })
                   }
               };
           };
       </script>
   </head>
   <body>
       <div id="box1"></div>
   </body>
</html>