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