标签：box function 滚轮 whel 兼容 day12 wheelDelta js

一, 滚轮事件

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;
    }
}

标签：box,function,滚轮,whel,兼容,day12,wheelDelta,js
来源： https://www.cnblogs.com/bnzw/p/13861945.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。