11. 滚轮事件

滚轮事件

onscroll事件为元素添加滚动(注意不是滚轮,滚动是滚动条发生变化)事件,该事件是滚动条变化就发生事件,所以一次鼠标滚动可能会发生很多次该事件
onwheel鼠标滚动事件,会在鼠标滚动时触发,推荐使用该事件
onmousewheel鼠标滚轮事件，会在滚轮滚动时触发，但是火狐不支持该属性，在火狐中需要使用DOMMouseScroll来绑定滚动事件，注意该事件需要通过addEventListener()方法来绑定

鼠标滚轮滚动方向

通过事件对象event.wheelDelta可以获取鼠标滚轮滚动的方向，向上滚为正，向下滚为负,值为数值120的倍数(一般为120,滚动过快会为120的倍数) **注:**只看正负，不看大小
在火狐中不支持event.wheelDelta属性,使用事件对象event.detail，向上滚为负，向下滚为正，与上方属性相反，并且每次滚动的数值为3的倍数(一般为3,滚动过快会为3的倍数)

<!--通过滚轮控制盒子大小-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>鼠标的滚轮事件</title>
    <style>
      #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 500px auto;
      }
    </style>
    <script>
      window.onload = function() {
        var box1 = document.getElementById("box1");
        //为box1绑定一个鼠标滚轮的事件
        box1.onmousewheel = function(event) {
          event = window.event || event;
          //火狐对鼠标滚轮方向的获取的属性时detail，其他浏览器是wheelDelta
          //鼠标向上滚时wheelDelta是正数，向下是负数，detail刚好相反。
          if (event.wheelDelta > 0 || event.detail < 0) {
            box1.style.height = parseFloat(box1.style.height) - 10 + "px"; //两种方式都可以，需要注意style.height必须是内联样式
            //所以必须用内联样式，同时这个的返回值是有单位的，必须转换
            box1.style.width = box1.clientWidth - 10 + "px";
          }
          //当鼠标滚轮向下滚动,box1变长
          //当鼠标滚轮向上滚动，box1变短
          else {
            box1.style.height = parseFloat(box1.style.height) + 10 + "px";
            box1.style.width = box1.clientWidth + 10 + "px";
          }
          //这个只是为了再火狐通过addEventListener()方法添加事件的时候用
          event.preventDefault && event.preventDefault();
          //去除默认事件
          return false;
        };

        addEvent(box1, "DOMMouseScroll", box1.onmousewheel);//给火狐添加

        function addEvent(box1, eventStr, callback) {
          if (box1.addEventListener) {
            box1.addEventListener(eventStr, callback, false);
          } else {
            box1.attachEvent("on" + eventStr, function() {
              callback.call(box1);
            });
          }
        }
      };
    </script>
  </head>
  <body>
    <div id="box1" style="height: 100px"></div>
  </body>
</html>

兼容写法(包括控制滚动的方向)

function mousewheel(dom,callback,bool){
    //bool为传入的一个布尔值,如果是true则阻止默认行为,默认是不阻止
    var type="mousewheel";
  
    if(dom.onmousewheel===undefined){//不能通过判断下面的那个,因为在火狐中dom属性也没有这个属性
        type="DOMMouseScroll";
    }
    //真正的事件函数
    function cb(event){
        /*
            自定义属性event.wheelDtail控制鼠标滚轮,所以在外部使用时应该用event.wheelDetail
        */
        //外部可以传入event作为事件对象也可以不传入直接使用,也不需要进行兼容,但是不传入时应该用event
        event=event||window.event;
        //把滚动事件的方向处理一致
        event.wheelDetail=event.wheelDelta/123 || event.detail/-3
        //每次滚动的值为1,并且向上滚动为正值,向下滚动为负值
        
        //阻止默认行为
        if(!!bool){
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue=flase;
            }
        }
        callback.call(this,event);
    }
    
    if(dom.addEventListener){
        dom.addEventListener(type,cb);
    }else{
        dom,attachEvent("on"+type,cb)
    }
}

11. 滚轮事件

# 滚轮事件

滚轮事件