javascript事件（四）之鼠标滚轮事件

45 阅读 0 评论 30 点赞

我是靠谱客的博主威武乐曲，最近开发中收集的这篇文章主要介绍javascript事件（四）之鼠标滚轮事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

鼠标滚轮事件
1.模拟滚动条：模拟滚动条的样式很难处理，类似于select的样式就很不好改变。如果页面中非要用样式好看的滚动条，可以先禁用浏览器中的滚动条之后再自己利用拖拽原理实现一个好看的滚动条。可以参考上一篇博客末尾的内容。
2.各浏览器中的鼠标滚轮事件：
A.在IE和Chrome中：onmousewheel
B.在Firefox中：DOMMouseScroll
注意：必须用addEventListener，而且要判断一下是否有addEventListener，否则IE下会出错
3.鼠标滚轮上下滚动的属性：
A.在IE和Chrome中：event.wheelDelta
鼠标每上滚一下增加120的倍数，每下滚一下增加-120的倍数；
B.在Firefox中：ev.detail
鼠标每上滚一下增加-3的倍数，每下滚一下增加3的倍数；

4.很明显在鼠标滚轮事件上火狐独树一帜，因此我们需要做到兼容：

练习1：鼠标滚轮控制div高度变化

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{width:100px; height:100px; background-color:red; position:absolute; left:100px; top:100px; z-index:5;}
</style>
</head>

<body>
<div id="box"></div>
<script>
    var oDiv = document.getElementById('box');
    function fn1(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){
            oDiv.style.height=oDiv.offsetHeight+10+'px';
        }else{
            oDiv.style.height=oDiv.offsetHeight-10+'px';
        }
        //以上是对滚轮上下属性的兼容处理
    }
    function bind(obj,evname,fn){
        if(obj.addEventListener){
            if(evname == 'mousewheel'){//此处是对火狐下滚轮事件的兼容
                obj.addEventListener('DOMMouseScroll',fn,false);
            }
            obj.addEventListener(evname,fn,false);
        }else{
            obj.attachEvent('on'+evname,fn,function(){
                        fn.call(obj);
                    }
            )}
    }
    bind(document,'mousewheel',fn1);
</script>
</body>
</html>

我不知道为什么火狐下滚动条滚动时div高度没有任何变化

练习2：鼠标滚轮控制输入框里数字变化（向上滚动缩小数字，向下滚动增大数字）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#text1{width:300px;}
</style>
</head>

<body>
<input type="text" placeholder='请输入数字，滚动鼠标滚轮改变数字大小' id="text1" />
<script>
    var oText1 = document.getElementById('text1');
    function fn1(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(oText1.value==''){
                alert("请输入数字");
            }else{
                if(b){
                    oText1.value--;
                }else{
                    oText1.value++;
                }
            }
    }
    function bind(obj,evname,fn){
        if(obj.addEventListener){
            if(evname == 'mousewheel'){
                obj.addEventListener('DOMMouseScroll',fn,false);
            }
            obj.addEventListener(evname,fn,false);
        }else{
            obj.attachEvent('on'+evname,fn,function(){
                fn.call(obj);
            }
        )}
    }
    bind(document,'mousewheel',fn1);
</script>
</body>
</html>

练习3：做一个滚动条拖动时，展示元素内容超出部分的内容（和一个真正滚动条一样）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{width:20px; height:60px; background-color:red; position:absolute; left:500px;z-index:5;}
#box1{width:20px; height:600px; background-color:green; position:absolute; left:500px;z-index:3;}
#box2{width:500px; height:600px;background-color:pink;position:absolute;left:540px; overflow:hidden;}
#p1{height:800px;background-color:pink; padding:10px 15px; position:absolute;}
</style>
</head>

<body style="height: 1000px;">
<div id="box"></div>
<div id="box1"></div>
<div id="box2">
    <p id="p1">今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套</p>
</div>
<script>
var oDiv = document.getElementById('box');
var oDiv1 = document.getElementById('box1');
var oDiv2 = document.getElementById('box2');
var oP1 = document.getElementById('p1');
downMove(oDiv,oDiv1,oP1);


function downMove(ele,ele2,ele3){
    ele.onmousedown = function(ev){
        var ev = ev || event;
        if(ele.setCapture){ele.setCapture();}
        var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
        var scrollLeft =  document.body.scrollLeft || document.documentElement.scrollLeft;
        var disX = ev.clientX - ele.offsetLeft + scrollLeft;
        var disY = ev.clientY - ele.offsetTop + scrollTop;
        document.onmousemove = function(ev){
            var ev = ev || event;
            var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
            var scrollLeft =  document.body.scrollLeft || document.documentElement.scrollLeft;
            var oTop = ev.clientY - disY + scrollTop;
            if(oTop<ele2.offsetTop){
                oTop = ele2.offsetTop;
            }
            if(oTop>ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight){
                oTop = ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight;
            }
            ele3.style.top=-(ele.offsetTop-ele2.offsetTop)*ele3.offsetHeight/(ele2.offsetHeight-ele.offsetHeight) + 'px';
            ele.style.top = oTop + 'px';
        }
        document.onmouseup = function(){
            if(ele.releaseCapture){ele.releaseCapture();}
            document.onmousemove = document.onmouseup = null;
        }
        return false;
    }
}
</script>
</body>
</html>

滚动条原理：(ele.offsetTop-ele2.offsetTop)/ele3.style.top == (ele2.offsetHeight-ele.offsetHeight)/ele3.offsetHeight
(小滚动块到页面顶部的top-滚动条到页面顶部的top)/要求div所需变化的top值 == （滚动条的总高度-小滚动的总高度）/小小滚动的总高度

补充：如果有滚动条会触发滚动的默认事件，阻止默认行为。但是return false会智能阻止on事件所触发的默认行为，不能阻止addEventListener绑定的事件，这种需要通过event下的ev.preventDefault()来阻止。