[英]Prevent scroll event propagation in mCustomScrollbar
我正在使用jQuery自定义内容滚动器在div元素上创建自定义滚动条。 当在div内部滚动并到达div的底端时,页面将开始滚动。 有没有办法阻止滚动事件传播?
我创建了一个http://jsfiddle.net/7CPv5/来说明问题。 只需调整浏览器大小以创建垂直滚动条并开始在“Hello World”div中滚动。 我这样调用插件:
$('#scrollable').mCustomScrollbar({
scrollInertia: 0
});
解决这个问题的不同方法:
$("#scrollable").mouseenter(function(){
$("#content-md").mCustomScrollbar("disable");
}).mouseleave(function(){
$("#content-md").mCustomScrollbar("update");
});
我知道这是一个老问题,但如果有人偶然发现它,这里是插件本地的方式来做它没有额外的脚本:
$('#scrollable').mCustomScrollbar({
scrollInertia: 0,
mouseWheel: {preventDefault: true}
});
参考: https : //github.com/malihu/malihu-custom-scrollbar-plugin/issues/263
您可以使用此解决方案:
$('#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自定义内容滚动条上时防止正文滚动事件处理。
您可以使用jquery-scrollLock :
$('#scrollable').scrollLock();
您可以处理mousewheel
和DOMMouseScroll
事件并调用preventDefault()
,如果事件源自滚动区域内。
$(document).on('mousewheel DOMMouseScroll', function(e) {
if ($(e.target).closest('.mCustomScrollbar').data('mouseWheel')) {
e.preventDefault();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.