2

我正在使用jQuery 自定义内容滚动条在 div 元素上创建自定义滚动条。当在 div 内滚动并到达 div 的底端时，页面将开始滚动。有没有办法防止滚动事件传播？

我创建了一个http://jsfiddle.net/7CPv5/来说明这个问题。只需调整浏览器的大小以创建一个垂直滚动条并开始在“Hello World”div 内滚动。我这样调用插件：

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

5 回答 5

3

解决此问题的不同方法： 

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

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

}).mouseleave(function(){

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

});
于 2014-06-03T13:29:06.900 回答
3

我知道这是一个老问题，但如果有人偶然发现它，这里是插件原生的方式来做到这一点，而无需额外的脚本：

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

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

于 2017-03-22T22:10:53.830 回答
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 自定义内容滚动条上时阻止正文滚动事件处理。

于 2014-04-16T06:25:01.047 回答
1

您可以使用jquery-scrollLock：

$('#scrollable').scrollLock();
于 2016-02-19T17:56:38.530 回答
0

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

$(document).on('mousewheel DOMMouseScroll', function(e) {
    if ($(e.target).closest('.mCustomScrollbar').data('mouseWheel')) {
        e.preventDefault();
    }
});
于 2015-02-11T17:57:09.330 回答