JavaScript之鼠标滚轮事件

74 阅读 0 评论 49 点赞

我是靠谱客的博主眯眯眼猎豹，最近开发中收集的这篇文章主要介绍JavaScript之鼠标滚轮事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鼠标滚轮滚动事件</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
    <script>
        window.onload = function () {
            var box = document.getElementById('box');
            /*
            为box绑定一个鼠标滚轮滚动事件
            该事件在鼠标滚动时触发
            onmousewheel事件在firefox浏览器上不支持
            */

            box.onmousewheel = callbackfunction;

            /*
            DOMMouseScroll 鼠标滚轮事件,在firefox上支持
            但需要使用addEventListener事件监听器绑定

            */
            // box.addEventListener('DOMMouseScroll',function(){alert("滚轮滚动~~~");},false);



            //fixfox支持的事件
            addEventFunc(box, 'DOMMouseScroll', callbackfunction);
            // addEventFunc(box,'onmousewheel',callbackfunction);

            function callbackfunction(event) {

                /*
                 当鼠标滚轮向下滚动时,box变长
                 当鼠标滚轮向上滚动时,box变短

                event事件对象的wheelDelta属性获取鼠标滚轮是向上还是向下滚动

                在IE和Chrome浏览器下：

                wheelDelta属性,将返回一个正负值
                返回值为正值时,表示向上滚动
                返回值为负值时,表示向下滚动

                该属性在firefox上不支持,
                但是firefox可以通过detail属性,获取鼠标滚轮是向上还是向下滚动

                detail属性,将返回一个正负值
                
                返回值为正值时,表示向下滚动
                返回值为负值时,表示向上滚动


                */
                // debugger;
                // var val=0
                event = event || window.event;

                /*
                对undefined值做测试:
                此值当用在逻辑表达式中(if(flag),条件表达式等等需要逻辑判断的语句中)
                JS在进行解析时,如果是undefined,返回false
                使用取反运算符(!)进行取反  --> !undefined   -->返回true
                null值也是同样处理

                下面使用条件运算符改写以下代码:
                
                */
                // val = event.wheelDelta;
                var temp=true;//临时变量,用来标记鼠标滚轮滚动方向,假设默认向下
                     temp=event.wheelDelta ? event.wheelDelta<0:event.detail>0;

                 if(temp){//鼠标滚轮滚动方向向下
                    this.style.height=this.offsetHeight+10+"px";
                 }else{
                    //鼠标滚轮滚动方向向上
                    this.style.height=this.offsetHeight-10+"px";
                 }

                /*
                使用addEventListener()绑定响应函数,不能使用return false取消默认行为
                使用event事件对象的preventDefault()方法来取消浏览器默认行为
                
                IE8中不支持此方法,需要检测
                
                */
                 if(event.preventDefault){
                    event.preventDefault();
                 }

                /*
                当鼠标滚动时,如果浏览器有滚动条,该滚动条会随着滚动,为浏览器的默认行为
                可以在响应函数里使用return false取消默认行为                
                */
                return false;

                // if(!val){
                //     alert("it is firefox");
                // }


                // if (event.wheelDelta) { //检测当前运行的浏览器是否支持wheelDelta属性
                //    //获取IE和Chrome上鼠标滚轮滚动方向
                // //    alert(this);
                //     val = event.wheelDelta;
                //     if (val > 0) {
                //         // alert("滚轮向上滚动");
                //         this.style.height=this.offsetHeight-10+"px";
                //     } else {
                //         // alert("滚轮向下滚动");
                //         this.style.height=this.offsetHeight+10+"px";
                //     }
                // }else{
                //     //获取firefox上鼠标滚轮滚动方向
                //     val=event.detail;
                //     if (val > 0) {
                //         // alert("滚轮向下滚动");
                //         this.style.height=this.offsetHeight+10+"px";
                //     } else {
                //         // alert("滚轮向上滚动");
                //         this.style.height=this.offsetHeight-10+"px";
                //     }
                // }
            }

            /*为firefox绑定鼠标滚轮事件*/
            function addEventFunc(obj, eventname, callbackfunction) {
                if (obj.addEventListener) {
                    obj.addEventListener(eventname, callbackfunction, false);
                }
            }
        }
    </script>
</head>

<body style="height:2000px;">
    <div id="box"> </div>
</body>

</html>