防止mCustomScrollbar中的滾動事件傳播

Question

我正在使用jQuery custom content scroller在div元素上創建自定義滾動條。當在一個div內滾動併到達div的底端時，頁面將開始滾動。有沒有辦法阻止滾動事件傳播？

我已經創建了一個http://jsfiddle.net/7CPv5/來說明問題。只需調整瀏覽器的大小以創建一個垂直滾動條並在「Hello World」div內開始滾動。我打電話插件這樣的：

$('#scrollable').mCustomScrollbar({ 
    scrollInertia: 0 
}); 

Answer 1

您可以使用此解決方案：

$('#scrollable').mCustomScrollbar({ 
    scrollInertia: 0 
}); 

var customScrollerFocused = false,  
    UserScrollDisabler = function() { 
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 
    // left: 37, up: 38, right: 39, down: 40 
    this.scrollEventKeys = [32, 33, 34, 35, 36, 37, 38, 39, 40]; 
    this.$window = $(window); 
    this.$document = $(document); 
}; 

UserScrollDisabler.prototype = { 
    disable_scrolling_on_custom_scroll_focused : function() { 
     var t = this; 
     t.$window.on("mousewheel.UserScrollDisabler DOMMouseScroll.UserScrollDisabler", this._handleWheel); 
     t.$document.on("mousewheel.UserScrollDisabler touchmove.UserScrollDisabler", this._handleWheel); 
     t.$document.on("keydown.UserScrollDisabler", function(event) { 
      t._handleKeydown.call(t, event); 
     }); 
    }, 

    enable_scrolling : function() { 
     var t = this; 
     t.$window.off(".UserScrollDisabler"); 
     t.$document.off(".UserScrollDisabler"); 
    }, 

    _handleKeydown : function(event) { 
     if(customScrollerFocused) { 
      for (var i = 0; i < this.scrollEventKeys.length; i++) { 
       if (event.keyCode === this.scrollEventKeys[i]) { 
        event.preventDefault(); 
        return; 
       } 
      } 
     } 
    }, 

    _handleWheel : function(event) {    
     if(customScrollerFocused) { 
      event.preventDefault(); 
     }   
    } 
}; 

var disabler = new UserScrollDisabler(); 
disabler.disable_scrolling_on_custom_scroll_focused(); 

$('#scrollable').find(".mCustomScrollBox").hover(
    function() { 
     customScrollerFocused = true; 
    }, 
    function() { 
     customScrollerFocused = false; 
    } 
); 

的想法在這裏是爲了防止當焦點在jQuery的自定義內容滾動體滾動事件處理。要解決這個

Answer 2

不同的方式：

$("#scrollable").mouseenter(function(){  

    $("#content-md").mCustomScrollbar("disable"); 

}).mouseleave(function(){ 

    $("#content-md").mCustomScrollbar("update"); 

}); 

Answer 3

您可以處理mousewheel和DOMMouseScroll事件，並呼籲preventDefault()如果該事件源於一個滾動區域內。

$(document).on('mousewheel DOMMouseScroll', function(e) { 
    if ($(e.target).closest('.mCustomScrollbar').data('mouseWheel')) { 
     e.preventDefault(); 
    } 
}); 

Answer 4

您可以使用jquery-scrollLock：

$('#scrollable').scrollLock(); 

Answer 5

我知道這是一個老問題，但如果有人絆倒它，這裏是做它無需額外的腳本插件原生方式：

$('#scrollable').mCustomScrollbar({ 
    scrollInertia: 0, 
    mouseWheel: {preventDefault: true} 
}); 

參考：https://github.com/malihu/malihu-custom-scrollbar-plugin/issues/263