Запрет распространения прокрутки в mCustomScrollbar

Question

Я использую jQuery custom content scroller для создания пользовательских скроллеров на элементах div. При прокрутке внутри div и достижении нижнего конца div страница начнет прокрутку. Есть ли способ предотвратить распространение события прокрутки?

Для иллюстрации проблемы я создал http://jsfiddle.net/7CPv5/. Просто измените размер браузера, чтобы создать вертикальную полосу прокрутки и начать прокрутку внутри div «Hello World». Я звоню плагин так:

$('#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