求“用JS(javascript)如何判断滚动条移动的方向?”代码

JavaScript015

求“用JS(javascript)如何判断滚动条移动的方向?”代码,第1张

浏览器差异:firefox滚轮事件是DOMMouseScroll,其他浏览器使用的是mousewheel

firefox事件的event对象使用detail值表示滚轮反向,(-3)表示向上,(3)表示向下。

其他浏览器使用wheelDelta值表示表示滚轮方向,(120)表示向上, (-120)表示向下。

监听事件,删除监听事件:IE678使用attachEvent/detachEvent, 其他浏览器使用addEventListener/removeEventListener。

fixedEvent:判断滚轮方向

fixedFn:滚动滚轮取消滚轮的默认滚动网页行为

el.wheelHash:把fixedFn存放到对象的wheelHash属性

var mousewheel = (function(){

    var types =['DOMMouseScroll','mousewheel']

    fixedEvent = function(e){

        e.wheel = (e.wheelDelta? e.wheelDelta : -e.detail) > 0? 1 : -1// 通过事件判断鼠标滚轮反向,1是向上,-1是向下

        e.wheelDir = e.wheel > 0? 'up' : 'down'    //这个只是描述 e.wheel的值和滚轮方向的关系

        return e

    }

    return{//返回mousewheel的方法

        on: function(el, fn, preventDefault){ //mousewheel对象的on方法, el触发mousewheel事件对象,fn触发后执行函数,preventDefault是否阻止默认行为:滚轮的网页滚动效果

            if(typeof preventDefault != 'boolean'){ //如果传入的实参preventDefault不是布尔值 

                preventDefault = true //初始化为true

            }    

            var fixedFn = function(e){ //阻止默认行为函数

                e = fixedEvent(e || window.event) // 兼容写法, 返回的e用来判断滚轮方向

                if(preventDefault){ // 如果需要阻止默认行为

                    if(e.preventDefault){    //firefox

                        e.preventDefault()

                    }

                    else{

                        e.returnValue = false //ie

                    }

                }

                fn.call(el, e) //el事件对象调用fn函数,参数为e 注意fn中使用e.wheel去判断鼠标滚轮事件

            },

            wheelHash = el.wheelHash //把包含fixedFn函数的 el.wheelHash属性 赋值给 wheelHash

            if(!wheelHash){  //判断函数是否存在 wheelHash 对象

                wheelHsah = {}

                wheelHash[fn] = fixedFn  //wheelHash对象的属性fn为阻止默认行为函数

                el.wheelHash = wheelHash  //把wheelHash对象赋值给el的wheelHash属性  wheelHash[fn] == el.wheelHash[fn]

            }else{

                if(wheelHash[fn]) return //如果存在 wheelHash 且 wheelHash中有 fixedFn 那么返回

                wheelHash[fn] = fixedFn  //如果没有, 就把fixedFn赋值给wheelHash.fn

            }

            if(document.addEventListener){  //firefox

                var i = types.length  

                while(i--){  //循环滚轮事件 数组

                    el.addEventListener(types[i], fixedFn, false)    //firefox el监听滚轮事件,执行取消默认行为

                }

            }

            else{  //ie

                el.attachEvent('onmousewheel', fixedFn)     // ie 监听事件, 处理函数fixedFn

            }

        },  

    //mousewheel中的on方法作用: 让元素监听事件,且处理是否执行默认行为。并且保存事件的阻止默认行为函数fixedFn到对象el.wheelHash属性中,

        un: function(el, fn){

            if(!el.wheelHash) return  //如果对象不存在wheelHash, 直接跳出(没效果了);

            var wheelHash = el.wheelHash

            if(document.removeEventListener){  //firefox

                var i = types.length

                while(i--){

                    el.removeEventListener(types[i],wheelHsah[fn], false)  //删除监听事件,执行取消默认行为

                }

            }else{ //ie

                el.detachEvent('onmousewheel', wheelHash[fn])

            }

                delete wheelHash[fn] //删除 默认行为函数

        },

    }

})()

//定义滚轮事件

// var myWheel = function(e){

    // console.log(e.wheelDir)

// }

//添加滚轮事件

// mouseWheel.on(element, myWheel)

//删除滚轮事件

// mouseWheel.un(element, myWheel)

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <p><label for="wheelDelta">  滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p>

 <p><label for="detail"> 滚动值:(Firefox)</label><input type="text" id="detail" /></p>

 <script type="text/javascript">

 var oTxt=document.getElementById("txt")

/***********************

* 函数:判断滚轮滚动方向

* 作者:walkingp

* 参数:event

* 返回:滚轮方向 1:向上 -1:向下

*************************/

var scrollFunc=function(e){

    var direct=0

    e=e || window.event

   

    var t1=document.getElementById("wheelDelta")

    var t2=document.getElementById("detail")

    if(e.wheelDelta){//IE/Opera/Chrome

        t1.value=e.wheelDelta

    }else if(e.detail){//Firefox

        t2.value=e.detail

    }

    ScrollText(direct)

}

/*注册事件*/

if(document.addEventListener){

    document.addEventListener('DOMMouseScroll',scrollFunc,false)

}//W3C

window.onmousewheel=document.onmousewheel=scrollFunc//IE/Opera/Chrome/Safari这里就是鼠标滚轮的事件~各个浏览器不太一样,这里做了兼容

</script>