怎么用jquery或者javascript让横向滚动条跟着鼠标滚球滚动

ul绑定mousewheel鼠标滚动事件(火狐用DOMMouseScroll)

取消默认动作，eventpreventDefault()（IE：windoweventreturnValue=false），这样滚轮滚动后就不会滚动页面了。

根据滚轮滚动的方向对ul内容进行控制，获取滚轮方向用eventwheelDelta，大于0为向上滚，小于0向下滚(火狐eventdetail，方向刚好相反，大于0向下)，再更改ul的scrollLeft值即可以模拟滚轮滚动效果了。

hi我在网上找到一篇文章专门写滚动的希望能帮助到你。

另外我想要提醒你的是：使用鼠标滚轮只适合在全屏中滚轮或者页面高度不足100%，而不是页面里的一个banner滚动，因为如果用户目的是往下滚动呢？

JS滚轮事件(mousewheel/DOMMouseScroll)了解

>

通常我都用 jQuery 来判断

var lastScrollTop = 0;

$(window)scroll(function(event){

var st = $(this)scrollTop();

if (st > lastScrollTop){

// downscroll code

} else {

// upscroll code

}

lastScrollTop = st;

});

不懂可以私信我

滚轮是1

如果是eventkeyCode的话，输出全是0

追问

不行哦。我就是想判断它是不是鼠标滚轮事件，然后去禁用滚轮，在某个时刻，我在去启动鼠标滚轮事件，就是想问问，如何禁用 和 启用鼠标的滚轮事件。

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

firefox事件的event对象使用detail值表示滚轮反向，（-3）表示向上，（3）表示向下。

其他浏览器使用wheelDelta值表示表示滚轮方向，（120）表示向上， （-120）表示向下。

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

fixedEvent：判断滚轮方向

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

elwheelHash：把fixedFn存放到对象的wheelHash属性

var mousewheel = (function(){

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

    fixedEvent = function(e){

        ewheel = (ewheelDelta ewheelDelta : -edetail) > 0 1 : -1;// 通过事件判断鼠标滚轮反向，1是向上，-1是向下

        ewheelDir = ewheel > 0 'up' : 'down';    //这个只是描述 ewheel的值和滚轮方向的关系

        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 || windowevent); // 兼容写法， 返回的e用来判断滚轮方向

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

                    if(epreventDefault){    //firefox

                        epreventDefault();

                    }

                    else{

                        ereturnValue = false; //ie

                    }

                };

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

            },

            wheelHash = elwheelHash; //把包含fixedFn函数的 elwheelHash属性 赋值给 wheelHash

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

                wheelHsah = {};

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

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

            }else{

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

                wheelHash[fn] = fixedFn;  //如果没有， 就把fixedFn赋值给wheelHashfn

            };

            if(documentaddEventListener){  //firefox

                var i = typeslength;  

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

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

                }

            }

            else{  //ie

                elattachEvent('onmousewheel', fixedFn);     // ie 监听事件， 处理函数fixedFn

            }

        },  

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

        un: function(el, fn){

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

            var wheelHash = elwheelHash;

            if(documentremoveEventListener){  //firefox

                var i = typeslength;

                while(i--){

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

                }

            }else{ //ie

                eldetachEvent('onmousewheel', wheelHash[fn]);

            }

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

        },

    }

})();

//定义滚轮事件

// var myWheel = function(e){

    // consolelog(ewheelDir);

// }

//添加滚轮事件

// mouseWheelon(element, myWheel);

//删除滚轮事件

// mouseWheelun(element, myWheel);

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

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

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

    windowaddEventListener('DOMMouseScroll', wheel, false);

windowonmousewheel = documentonmousewheel = wheel;//W3C

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

function wheel(event){

    var delta = 0;

    if (!event) event = windowevent;

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

        delta = eventwheelDelta/120; 

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

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

        delta = -eventdetail/3;

    }

    if (delta)

        handle(delta);

}

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

function handle(delta) {

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

            

        }else{//向上滚动

            

        }

    }

以上就是关于怎么用jquery或者javascript让横向滚动条跟着鼠标滚球滚动全部的内容，包括:怎么用jquery或者javascript让横向滚动条跟着鼠标滚球滚动、jquery.slides.js图片轮播怎样调用鼠标滑轮滚动的功能、js中鼠标滚轮事件分析，怎么判断鼠标向上滚还是向下滚等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！