滚轮事件onmousewheel

Posted 2020-08-08

1、滚动条事件 ： document.onscroll  = function() { } 

 

2、滚轮事件 ：document.onmousewheel = function (){ }  （firefox 不支持）

(1) event.wheelDelta > 0 :滚轮向上

        (120)

(2) event.wheelDelta < 0 :滚轮向下

        (-120)

 

DOMMouseScroll (使用addEventListener事件绑定)

   （event.detail < 0:滚轮向上，event.detail > 0:滚轮向下）【firefox支持方法】

 

 

使用call引用对象 ,兼容火狐的滚轮事件

function  scroll (obj , fun ){

    var down = 0;

    if( window.navigator.userAgent.indexof( "Firefox" ) > -1 ){

        obj.addEventListent ("DOMMouseScroll",fun_Nei , false );

    }else {

        obj.onmousewheel = fun_Nei ;

    }

    function fun_Nei (event ,down ){

        if( event.detail ){

            down += event.detail ; 

        }else{

            down += event.wheelDetail ;

        }

    }

    if(window.stopPropagation)

    {

        stopPropagation();

    }else {

        window.cancelBubble = true ; 

    }

    return false ; 

}

 

在其他地方，scroll() 函数外或另一个html文档里引用 scroll():

（1） ：scroll ( 【document或具体对象】,   function (event , down ) {

    .....使用down的值......

});

（2）：function hans(event , down ) {

                    .....使用down的值......

             }

            scroll ( document【或具体对象】,  hans ) ;