鼠标滚轮事件

<div class="box" id="div1">
    <div style="margin-top:0;">
        <p id="p">这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
    </div>
</div>

.box{position:relative;}
#div1{
       width:500px;
       height:300px;
       background:#ffff00;
       margin:0 auto;
       overflow:hidden;
       padding:10px;
   }

window.onload = function () {
        var oDiv = document.getElementById('div1');
        var p=document.getElementById('p');
        function onMouseWheel(ev) {/*当鼠标滚轮事件发生时，执行一些操作*/
            var ev = ev || window.event;
            var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
            down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0; //这是对浏览器的兼容性测试
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//console.log(ev.wheelDelta);//鼠标滚轮向下滚动时，谷歌、ie浏览器打印出-120;不兼容火狐
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//console.log(ev.detail);//鼠标滚轮向下滚动时，火狐打印出3，只在火狐上有用
            if(down){

                //alert('鼠标向下滚动');
               
                //console.log(oDiv.children[0].style.marginTop);
                var i=oDiv.children[0].style.marginTop;
                i=parseInt(i);
                console.log(i);
                if(i==(-180)){
                    return false;
                }
                i=i-10;
                oDiv.children[0].style.marginTop=i+'px';
                //return false阻止默认事件，可以看成跳出本次事件执行，执行它之后，它之后的事件都不被执行
            }else{
                //alert('鼠标向上滚动');
               
                var i1=oDiv.children[0].style.marginTop;
                i1=parseInt(i1);
                if(i1==0){
                    return false;
                }
                console.log(i1);
                i1=parseInt(i1)+10;
                oDiv.children[0].style.marginTop=i1+'px';
            }
            if(ev.preventDefault){/*FF 和 Chrome*/
                ev.preventDefault();// 阻止默认事件
            }
            return false;
        }
        addEvent(oDiv,'mousewheel',onMouseWheel);
        addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
    }
    function addEvent(obj,xEvent,fn) {
        if(obj.attachEvent){
            obj.attachEvent('on'+xEvent,fn);
        }else{
            obj.addEventListener(xEvent,fn,false);
        }

上面代码出来的效果如下：

鼠标在黄色区域滚轮滚动时，绿框的内容随之滚动，这是鼠标的滚轮事件。