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

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

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

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

javascript jquery scrollbar event-propagation
person Fynn    schedule 16.02.2014    source источник

Ответы (5)


arrow_upward
3
arrow_downward

Другой способ решить эту проблему:

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

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

}).mouseleave(function(){

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

});
person user2140041    schedule 03.06.2014

arrow_upward
3
arrow_downward

Я знаю, что это старый вопрос, но если кто-то наткнется на него, вот способ сделать это без дополнительных сценариев:

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

Ссылка: https://github.com/malihu/malihu-custom-scrollbar-plugin/issues/263

person owaisafaq    schedule 22.03.2017

arrow_upward
1
arrow_downward

Вы можете использовать это решение:

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

person Vladimir Trifonov    schedule 16.04.2014

arrow_upward
1
arrow_downward

Вы можете использовать jquery-scrollLock:

$('#scrollable').scrollLock();
person Andrey    schedule 19.02.2016

arrow_upward
0
arrow_downward

Вы можете обрабатывать события mousewheel и DOMMouseScroll и вызывать preventDefault(), если событие возникло внутри прокручиваемой области.

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