jQuery鼠标滚轮div IE问题

问题描述

我正在尝试为简单的div启用鼠标滚轮滚动。它适用于FF CHROME SAFARI ...但IE 7,8,9仍然不会像往常一样合作;）

I'm trying to enable mousewheel scroll for a simple div. It work for FF CHROME SAFARI...but IE 7,8,9 still won't cooperate as usual ;)

我正在使用jQuery mousewheel插件：

I am using jQuery mousewheel plugin :

(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
    setup: function() {
        if ( this.addEventListener ) {
            for ( var i=types.length; i; ) {
                this.addEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = handler;
        }
    },
    teardown: function() {
        if ( this.removeEventListener ) {
            for ( var i=types.length; i; ) {
                this.removeEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = null;
        }
    }
};
$.fn.extend({
    mousewheel: function(fn) {
        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
    },

    unmousewheel: function(fn) {
        return this.unbind("mousewheel", fn);
    }
});
function handler(event) {
    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
    event = $.event.fix(orgEvent);
    event.type = "mousewheel";
    // Old school scrollwheel delta
    if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
    if ( event.detail     ) { delta = -event.detail/3; }
    // New school multidimensional scroll (touchpads) deltas
    deltaY = delta;
    // Gecko
    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
        deltaY = 0;
        deltaX = -1*delta;
    }
    // Webkit
    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
    // Add event and delta to the front of the arguments
    args.unshift(event, delta, deltaX, deltaY);
    return $.event.handle.apply(this, args);
}
})(jQuery);

使用此功能：

jQuery(function() {
     jQuery('#home_new_wrapper').mousewheel(function(event, delta) {
         var scrollTop = jQuery(this).scrollTop();
         jQuery(this).scrollTop(scrollTop-Math.round(delta * 20));
             return false; // prevent default
     });
});

如果有人知道如何修复IE 7-8-9

If someone have a clue on how I can fix IE 7-8-9

谢谢

编辑

我将我的版本从1.4.2更新到1.6.1并且它有效....我还有一个问题

I UPDATED MY JQUERY VERSION FROM 1.4.2 to 1.6.1 and it work.... I still have a question

有人可以帮助修改此代码以绑定向上/向下箭头?????

Can someone help to modify this code to bind the UP/DOWN arrows too?????

推荐答案

我刚刚解决了这个问题，将透明背景图像设置为DIV样式。

I just solved this issue setting a transparent backgroung image to DIV style.

background: url(../images/desktop/common/scroll-pages-bg-fix-to-ie.png) repeat;

scroll-pages-bg-fix-to-ie.png 是1x1像素，透明色。

The scroll-pages-bg-fix-to-ie.png is 1x1 pixels with transparent color.

问题是IE仅在具有可视元素的区域上回答此事件。
一如既往！ IE给我们带来了问题。

The problem is IE answer to this event only over areas with visual elements.As always! IE giving us problems.

在我的问题中，活动是 .scroll

In my issue the event was .scroll

$("#content #pages").scroll(function () {...});

但我想我的解决方案可以解决您的问题。

but I suppose my solution can solve your problem.

这篇关于jQuery鼠标滚轮div IE问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！