javascript - Prevent scroll event propagation in mCustomScrollbar - Stack Overflow

admin管理员组

文章数量:1287810

I am using the jQuery custom content scroller to create custom scrollers on div elements. When scrolling inside of a div and reaching the bottom end of the div, the page will start scrolling. Is there a way to prevent the scroll event from propagating?

I have created a / to illustrate the issue. Just resize the browser to create a vertical scrollbar and start scrolling inside the "Hello World" div. I am calling the plugin like this:

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

I am using the jQuery custom content scroller to create custom scrollers on div elements. When scrolling inside of a div and reaching the bottom end of the div, the page will start scrolling. Is there a way to prevent the scroll event from propagating?

I have created a http://jsfiddle/7CPv5/ to illustrate the issue. Just resize the browser to create a vertical scrollbar and start scrolling inside the "Hello World" div. I am calling the plugin like this:

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

• javascript
• jquery
• scrollbar
• event-propagation

Share Improve this question Follow asked Feb 16, 2014 at 18:29 FynnFynn 4,89344 gold badges3535 silver badges7575 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Different way to solve this:

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

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

}).mouseleave(function(){

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

});

I know this is an old question but if someone stumbles upon it, here is the plugin-native way to do it without extra scripting:

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

Reference: https://github./malihu/malihu-custom-scrollbar-plugin/issues/263

You can use this solution:

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

The idea here is to prevent body scroll event handling when the focus is on the jQuery custom content scroller.

You can use jquery-scrollLock:

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

You can handle the mousewheel and DOMMouseScroll events and call preventDefault() if the event originated from inside a scrollable region.

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

本文标签： javascriptPrevent scroll event propagation in mCustomScrollbarStack Overflow