2011-04-28 104 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() {...}); 

但我想我的解決方案能夠解決你的問題。