一, 滚轮事件

1, 绑定事件

// 标准和IE：onmousewheel   传统和事件监听都可以

// 火狐：只能用事件监听   元素.addEventListener('DOMMouseScroll',函数)

2, 滚轮信息

 //标准和IE： 向上  120  向下 -120 
// 火狐： 向上 -3  向下 3 

3, 滚轮信息兼容

function whel(e){
    if(e.wheelDelta){
        return e.wheelDelta
    }else{
        return e.detail * -40;
    }
}

4, 滚轮改变元素大小

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

addEvent(box, 'mousewheel', fn)
addEvent(box, 'DOMMouseScroll', fn)

function fn(e) {
    var e = e || window.event;

    // 获取元素的本省的高度
    var h = box.clientHeight;
    // 标准和IE
    //console.log(e.wheelDelta);
    // 火狐
    // console.log(e.detail);

    // 调用兼容函数
    // console.log(whel(e));

    if(whel(e) > 0){ // 120 
        h --;
    }else{
        h++
    }
    box.style.height = h + 'px';
}

// 兼容  元素 事件名 函数
function addEvent(obj, sName, fnName) {

    if (obj.addEventListener) {
        obj.addEventListener(sName, fnName, false);
    } else {
        obj.attachEvent('on' + sName, fnName)
    }
}

// 滚轮信息兼容
function whel(e){
    if(e.wheelDelta){
        return e.wheelDelta
    }else{
        return e.detail * -40;
    }
}