鼠标滚轮调整DIV高度-优快云博客

本文链接：https://blog.youkuaiyun.com/Della_UI/article/details/53056592

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <script type="text/javascript">
            var oDiv=document.getElementById("div1");

            // ie/chrome:onmousewheel  滚动方向：event.wheelDelta  下：-120； 上：120
            oDiv.onmousewheel=fn;

            // firefox:DOMMouseScroll 必须用AddEventListener  滚动方向：event.detail   下：3； 上：-3
            if (oDiv.addEventListener) {
                oDiv.addEventListener('DOMMouseScroll',fn,false);
            }

            function fn(ev){
                var ev = ev || event;
                var b=true;
                if (ev.wheelDelta) {
                    b=ev.wheelDelta > 0 ? true : false;
                }else{
                    b=ev.detail < 0 ? true : false;
                }

                if ( b ) {
                    this.style.height=this.offsetHeight - 10 +'px';
                }else{
                    this.style.height=this.offsetHeight + 10 +'px';
                }

                // 阻止 obj.addEventListener(事件名称，时间函数，是否捕获) 形式的事件默认行为
                if (ev.preventDefault) {
                    ev.preventDefault();
                }

                // 阻止 obj.事件名称=事件函数 和 obj.attachEvent(事件名称，事件函数) 形式的事件默认行为
                return false;
            }
        </script>
    </body>
</html>

鼠标滚轮事件