2011-04-28 117 views
0

我想启用滚轮为简单的div。它工作了FF CHROME SAFARI ...但IE 7,8,9仍然不会合作如常;)jQuery滚轮滚动div IE问题

我使用jQuery插件鼠标滚轮:

(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线索

谢谢

编辑

我更新了我的JQUERY提供的版本1.4.2到1.6.1和它的工作....我仍然有一个问题

有人能帮助修改此代码绑定UP/DOWN箭头太?????

+0

你可以发布一个最小的演示,再现你的问题[JS小提琴](http://jsfiddle.net/)?这样我们就可以看到问题所在,以及所有相关的代码。 – 2011-04-28 18:59:37

+0

jScrollPane完全符合你的要求并实现了jquery.mousewheel:http://jscrollpane.kelvinluck.com/ – davidosomething 2011-04-28 19:25:13

+0

谢谢我将试一试jScrollPane – 4nkh 2011-04-30 07:23:59

回答

0

即使使用jQ 1.6.2,我也无法使其工作。但我可以给你的箭头键代码:

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

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

}); 

0

我只是解决了这个问题一个透明backgroung图像设置DIV的风格。

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

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

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

在我的问题上的事件是.scroll

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

但我想我的解决方案能够解决你的问题。