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,
    mouseWheel: {preventDefault: true}
});

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

Answer 2

解决这个问题的不同方法：

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

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

}).mouseleave(function(){

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

});

Answer 3

您可以使用此解决方案：

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

您可以使用jquery-scrollLock：

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

Answer 5

如果事件来自可滚动区域内，您可以处理mousewheel和DOMMouseScroll事件并致电preventDefault()。

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

阻止mCustomScrollbar中的滚动事件传播

5 个答案: