wheelDelta与鼠标滚轮

wheelDelta与鼠标滚轮

HTML

<label for="wheelDelta">滚动值:(IE/Opera)</label>
<input type="text" id="wheelDelta" />
<br>
<label for="detail">滚动值:(Firefox)</label>
<input type="text" id="detail" />
<div id='kixi' style='width:200px;height:200px;background-color:blue;color:#fff'>123</div>

CSS

/*
清晰网
kixi.com.cn
从javascript开始
*/

JavaScript

//当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向下还是向上），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到document(IE)或window(Opera、Chrome、及Safari)对象。与mousewheel事件对应的event对象包含鼠标事件的所有标准信息之外，还包含一个特殊的wheelDelta属性。当用于向前滚动鼠标滚轮是，wheelDelta是120的倍数；当用户向后滚动鼠标滚轮是，wheelDelta是-120的倍数

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

var scrollFunc = function (e) {
    e = e || window.event;
    var t1 = document.getElementById("wheelDelta");
    var t2 = document.getElementById("detail");
    if (e.wheelDelta) { 
        
        //如果是IE/Opera/Chrome浏览器
        t1.value = e.wheelDelta;
    } else if (e.detail) { 
        //如果是Firefox浏览器
        t2.value = e.detail;
    }
}

if (kixi.addEventListener) {
    //非firefox
    kixi.addEventListener('mousewheel', scrollFunc, false);
    
    //firefox
    kixi.addEventListener('DOMMouseScroll', scrollFunc, false);
}