js,鼠标上下滑轮或者拉动滚动条触发事件

JavaScript027

js,鼠标上下滑轮或者拉动滚动条触发事件,第1张

window.onmousewheel = function(){  //触发滚轮事件

}

window.onscroll = function(){  //滚动条事件

}

//其实你的问题直接使用判断滚动条应该就可以了,但是如果一定要拖动滚动条才执行事件,我们可以通过获取鼠标位置来模拟

var a = document.getElementsByTagName("html")[0]

window.onmousemove = function(){

        //一般默认滚动条12px宽,当鼠标位于浏览器窗口右边12px内按下鼠标可以视为拖动滚动条

if(innerWidth - event.clientX < 12){

a.onmousedown = function(){

console.log(1)

}

}else{

a.onmousedown = null

}

}

我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。先分析原理:我们是通过判断鼠标滚动的获取一个值,然后根据这个值判断滚动的方向。然而不同浏览器有不同的获取方法,所以要分浏览器写方法。不同浏览器不同的事件首先,不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请先去了解鼠标滚轮(mousewheel)和DOMMouseScroll事件。过程中需要添加事件监听:兼容firefox采用addEventListener监听。js返回数值判断滚轮上下判断滚轮向上或向下在浏览器中也要考虑兼容性(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上也是不一致,但是含义一致,detail与wheelDelta只各取两个 值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。 具体的代码如下所示:<label for=wheelDelta滚动值:</label(IE/Opera)<input type=text id=wheelDelta/<label for=detail滚动值:(Firefox)</label<input type=text id=detail/<script type=text/javascriptvar scrollFunc=function(e){e = e || window.eventvar t1=document.getElementById(wheelDelta)var t2=document.getElementById(detail)if(e.wheelDelta){//IE/Opera/Chromet1.value=e.wheelDelta}else if(e.detail){//Firefoxt2.value=e.detail}}/*监听事件*/

//兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了

//判断鼠标滚轮滚动方向

if (window.addEventListener)//FF,火狐浏览器会识别该方法

    window.addEventListener('DOMMouseScroll', wheel, false)

window.onmousewheel = document.onmousewheel = wheel//W3C

//统一处理滚轮滚动事件

function wheel(event){

    var delta = 0

    if (!event) event = window.event

    if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta,并且值为“正负120”

        delta = event.wheelDelta/120 

        if (window.opera) delta = -delta//因为IE、chrome等向下滚动是负值,FF是正值,为了处理一致性,在此取反处理

    } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”

        delta = -event.detail/3

    }

    if (delta)

        handle(delta)

}

//上下滚动时的具体处理函数

function handle(delta) {

        if (delta <0){//向下滚动

            

        }else{//向上滚动

            

        }

    }