不同浏览器中的Javascript滚动条类和鼠标滚轮速度

我收到很多报告说，当使用这个滚动条类时，鼠标滚轮在不同浏览器中的行为不同。在某些浏览器（如Firefox）中速度非常慢，而在其他浏览器（大多是雪豹上的Safari新版本）中速度非常好

你知道这是怎么回事，怎么解决吗？我正在使用Mootools库。这里需要注意的一行是

wheel:（Browser.firefox）？20:1

行。这是设置鼠标滚轮的速度或步数的地方

这里它是在jsFiddle中设置的：

var ScrollBar=新类({
实现：[事件、选项]，
选项：{
轮子：（Browser.firefox）？20:1
},
初始化：函数（主、选项）{
此选项。设置选项（选项）；
this.main=$（main）；
this.content=this.main.getFirst（）；
this.vScrollbar=新元素（'div'{
“类”：“滚动条”
}).inject（this.content，'after'）；
this.vTrack=新元素（'div'{
“类”：“轨道”
}).注入（此.vScrollbar）；
this.vThumb=新元素（'div'{
“类”：“句柄”
}).注入（此.vTrack）；
this.bound={
“vStart”：this.vStart.bind（this），
“end”：this.end.bind（this），
“vDrag”：this.vDrag.bind（this），
'vtuchdrag'：this.vtuchdrag.bind（this），
“轮子”：this.wheel.bind（this），
“vPage”：this.vPage.bind（this），
};
this.vScrollbar.set（'tween'{
持续时间：200，
过渡：“立方：输出”
});
this.main.addEvent（'mouseenter'，函数（事件）{
这个.vScrollbar.get（'tween'）.cancel（）；
这个.vScrollbar.tween（'width'，12）；
}.约束（这个）；
this.main.addEvent（'mouseleave'，函数（事件）{
这个.vScrollbar.get（'tween'）.cancel（）；
这个.vScrollbar.tween（'width'，0）；
}.约束（这个）；
this.vPosition={}；
this.vMouse={}；
这个.update（）；
这个。附加（）；
this.scrollContent=new Fx.Scroll（this.content{
持续时间：800，
过渡：Fx.Transitions.Cubic.easeOut，
});
this.scrollThumb=new Fx.Morph（this.vThumb{
持续时间：400，
过渡：Fx.Transitions.Cubic.easeOut，
});
},
更新：函数（）{
var panel_id=（this.content.getFirst（））？this.content.getFirst（）.get（'id'）：''；
if（（this.content.scrollHeight this.vThumb.getPosition（）.y）{
myInstance=这个；
this.content.scrollTopNew=this.content.scrollTop.toInt（）+this.content.offsetHeight.toInt（）；
this.scrollContent.start（0，this.content.scrollTopNew）；
}
//如果向下滚动
否则{
myInstance=这个；
this.content.scrollTopNew=this.content.scrollTop.toInt（）-this.content.offsetHeight.toInt（）；
this.scrollContent.start（0，this.content.scrollTopNew）；
}
myInstance.vUpdateThumbFromContentScroll2（event.page.y）；
事件停止（）；
},
vStart:函数（事件）{
this.vMouse.start=event.page.y；
this.vPosition.start=this.vThumb.getStyle（'top'）.toInt（）；
document.addEvent（'touchmove'，this.bound.vtuchdrag）；
document.addEvent（'touchend'，this.bound.end）；
document.addEvent（'mousemove'，this.bound.vDrag）；
document.addEvent（'mouseup'，this.bound.end）；
this.vThumb.addEvent（'mouseup'，this.bound.end）；
事件停止（）；
},
结束：功能（事件）{
document.removeent（'touchmove'，this.bound.vtouchrag）；
document.removevent（'mousemove'，this.bound.vDrag）；
document.removeEvent（'mouseup'，this.bound.end）；
this.vtumb.removeEvent（'mouseup'，this.bound.end）；
事件停止（）；
},
vtuchdrag:函数（事件）{
this.vMouse.now=event.page.y；
this.vPosition.now=（this.vPosition.start-（this.vMouse.now-this.vMouse.start））.limit（0，（this.vTrackSize-this.vtumbsize））；
this.vUpdateContentFromThumbPosition（）；
此.vUpdateThumbFromContentScroll（）；
事件停止（）；
},
vDrag:功能（事件）{
this.vMouse.now=event.page.y；
this.vPosition.now=（this.vPosition.start+（this.vMouse.now-this.vMouse.start））.limit（0，（this.vTrackSize-this.vThumbSize））；
this.vUpdateContentFromThumbPosition（）；
此.vUpdateThumbFromContentScroll（）；
事件停止（）；
}
});

鼠标滚轮事件在javascript中非常狡猾，主要问题通常是Safari，因为它们用于调整每个点发布的比率，即使如此，事件报告的值在所有主要浏览器中也不相同

不久前，MooTools tracker（）上对此进行了一些讨论，并比较了不同的解决方案。我得出结论，没有标准的方法来规范事件。

---

关于该问题的最后一条消息显示了一种可能的规范化（）解决方案，但它破坏了Safari中的控制盘加速（以及其他浏览器/操作系统/鼠标驱动程序组合提供的任何其他加速）因此，这是一个权衡，您必须评估它是否符合您的使用场景的要求。

发布一个www.jsfiddle.net示例，说明您如何使用它，它并不十分明显，或者是指向另一个demo.hrm event.wheel的链接。在ie8、ff 3.6.13和chrome 7中，对于我来说，在向下滚动时总是返回-1-在ie8、ff 3.6.13和chrome 7中，只有firefox看起来可以，因为

this.o选项.wheel

为20。有什么特别的原因不能对所有浏览器使用步骤20吗？另外，您可能希望通过

this.dragging=true；

跟踪拖动，并在mouseleave函数中进行检查，如果您将鼠标移出，则隐藏滚动条-拖动时不应将其消失。更改

end

以设置

>这是。拖动

t

var ScrollBar = new Class({

    Implements: [Events, Options],

    options: {
        wheel: (Browser.firefox) ? 20 : 1
    },

    initialize: function(main, options) {

        this.setOptions(options);

        this.main = $(main);
        this.content = this.main.getFirst();

        this.vScrollbar = new Element('div', {
            'class': 'scrollbar'
        }).inject(this.content, 'after');

        this.vTrack = new Element('div', {
            'class': 'track'
        }).inject(this.vScrollbar);

        this.vThumb = new Element('div', {
            'class': 'handle'
        }).inject(this.vTrack);

        this.bound = {
            'vStart': this.vStart.bind(this),
            'end': this.end.bind(this),
            'vDrag': this.vDrag.bind(this),
            'vTouchDrag': this.vTouchDrag.bind(this),
            'wheel': this.wheel.bind(this),
            'vPage': this.vPage.bind(this),
        };

        this.vScrollbar.set('tween', {
            duration: 200,
            transition: 'cubic:out'
        });
        this.main.addEvent('mouseenter', function(event){
            this.vScrollbar.get('tween').cancel();
            this.vScrollbar.tween('width', 12);
        }.bind(this));
        this.main.addEvent('mouseleave', function(event){
            this.vScrollbar.get('tween').cancel();
            this.vScrollbar.tween('width', 0);
        }.bind(this));

        this.vPosition = {};
        this.vMouse = {};
        this.update();
        this.attach();

        this.scrollContent = new Fx.Scroll(this.content, {
            duration: 800,
            transition: Fx.Transitions.Cubic.easeOut,
        });
        this.scrollThumb = new Fx.Morph(this.vThumb, {
            duration: 400,
            transition: Fx.Transitions.Cubic.easeOut,
        });
    },

    update: function() {

        var panel_id = (this.content.getFirst()) ? this.content.getFirst().get('id') : '';

        if ((this.content.scrollHeight <= this.main.offsetHeight) || panel_id == 'random-doodle') this.main.addClass('noscroll');
        else this.main.removeClass('noscroll');

        this.vContentSize = this.content.offsetHeight;
        this.vContentScrollSize = this.content.scrollHeight;
        this.vTrackSize = this.vTrack.offsetHeight;

        this.vContentRatio = this.vContentSize / this.vContentScrollSize;

        this.vThumbSize = (this.vTrackSize * this.vContentRatio).limit(12, this.vTrackSize);

        this.vScrollRatio = this.vContentScrollSize / this.vTrackSize;

        this.vThumb.setStyle('height', this.vThumbSize);

        this.vUpdateThumbFromContentScroll();
        this.vUpdateContentFromThumbPosition();

    },

    vUpdateContentFromThumbPosition: function() {
        this.content.scrollTop = this.vPosition.now * this.vScrollRatio;
    },

    vUpdateContentFromThumbPosition2: function() {
        var pos = this.vPosition.now * this.vScrollRatio;
        this.scrollContent.start(0, pos);
    },

    vUpdateThumbFromContentScroll: function() {
        this.vPosition.now = (this.content.scrollTop / this.vScrollRatio).limit(0, (this.vTrackSize - this.vThumbSize));
        this.vThumb.setStyle('top', this.vPosition.now);
    },

    vUpdateThumbFromContentScroll2: function(pos) {
        this.vPosition.now = (this.content.scrollTopNew / this.vScrollRatio).limit(0, (this.vTrackSize - this.vThumbSize));           
        this.scrollThumb.start({
            'top': this.vPosition.now       
        });
    },

    attach: function() {
        if (this.options.wheel) this.content.addEvent('mousewheel', this.bound.wheel);
        this.content.addEvent('touchstart', this.bound.vStart);
        this.vThumb.addEvent('mousedown', this.bound.vStart);
        this.vTrack.addEvent('mouseup', this.bound.vPage);
    },

    wheel: function(event) {
        this.content.scrollTop -= event.wheel * this.options.wheel;
        this.vUpdateThumbFromContentScroll();
        event.stop();
    },

    scrollTo: function(pos){
        myInstance = this;
        this.content.scrollTopNew = pos;
        this.scrollContent.start(0, this.content.scrollTopNew);
        myInstance.vUpdateThumbFromContentScroll2(pos);
    },

    vPage: function(event) {
        // if scrolling up
        if (event.page.y > this.vThumb.getPosition().y) {
            myInstance = this;
            this.content.scrollTopNew = this.content.scrollTop.toInt() + this.content.offsetHeight.toInt();
            this.scrollContent.start(0, this.content.scrollTopNew);
        }
        // if scrolling down
        else {
            myInstance = this;    
            this.content.scrollTopNew = this.content.scrollTop.toInt() - this.content.offsetHeight.toInt();    
            this.scrollContent.start(0, this.content.scrollTopNew);       
        }
        myInstance.vUpdateThumbFromContentScroll2(event.page.y);
        event.stop();
    },

    vStart: function(event) {
        this.vMouse.start = event.page.y;
        this.vPosition.start = this.vThumb.getStyle('top').toInt();
        document.addEvent('touchmove', this.bound.vTouchDrag);
        document.addEvent('touchend', this.bound.end);
        document.addEvent('mousemove', this.bound.vDrag);
        document.addEvent('mouseup', this.bound.end);
        this.vThumb.addEvent('mouseup', this.bound.end);
        event.stop();
    },

    end: function(event) {
        document.removeEvent('touchmove', this.bound.vTouchDrag);
        document.removeEvent('mousemove', this.bound.vDrag);
        document.removeEvent('mouseup', this.bound.end);
        this.vThumb.removeEvent('mouseup', this.bound.end);
        event.stop();
    },

    vTouchDrag: function(event) {
        this.vMouse.now = event.page.y;
        this.vPosition.now = (this.vPosition.start - (this.vMouse.now - this.vMouse.start)).limit(0, (this.vTrackSize - this.vThumbSize));
        this.vUpdateContentFromThumbPosition();
        this.vUpdateThumbFromContentScroll();
        event.stop();
    },

    vDrag: function(event) {
        this.vMouse.now = event.page.y;
        this.vPosition.now = (this.vPosition.start + (this.vMouse.now - this.vMouse.start)).limit(0, (this.vTrackSize - this.vThumbSize));
        this.vUpdateContentFromThumbPosition();
        this.vUpdateThumbFromContentScroll();
        event.stop();
    }

});