jQuery mousewheel scroll div IE PROBLEM

Question

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 ;)

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);

with this function:

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
     });     
});

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

Thank you

EDIT

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?????

Answer 1

I can't get it to work, even with jQ 1.6.2. But I can give you the arrow key code:

$(window).bind('keydown', function(e){

if (e.keyCode == 38){
    $('#layerslider').layerSlider('prev');
}
else if (e.keyCode == 40){
    $('#layerslider').layerSlider('next');
}

});

Answer 2

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;

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

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

In my issue the event was .scroll

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

but I suppose my solution can solve your problem.