JQ插件mCustomScrollbar是让不同浏览器的滚动条样式能同一。
当有使用Dialog的时候页面内某些div区域内 使用到了滚动条 那么Dialog内使用到鼠标滚轮的时候就会和页面的滚动条冲突。
上图这种使用到了vue-cropper裁剪功能,当用户上传图片上来裁剪的时候,鼠标滚轮可以对图片进行缩放,但是页面层使用了mCustomScrollbar插件 会跟着滚动 体验很不好。
所以 在 弹出Dialog事件内先销毁原来的页面滚轮事件 再创建一个禁用鼠标滚轮滚事件 设置mouseWheel
jQuery("#advancedConfiguration").mCustomScrollbar("destroy")
jQuery('#advancedConfiguration').mCustomScrollbar({
theme: "minimal",
normalizeDelta: true,
scrollInertia: 300,
setTop:"800px",
mouseWheel:{
enable:false
}
})
Dialog关闭的时候 销毁带有鼠标滚轮禁用的事件,再创建正常的页面滚轮事件 注意滚轮定位在点击出现Dialog地方
jQuery("#advancedConfiguration").mCustomScrollbar("destroy")
jQuery('#advancedConfiguration').mCustomScrollbar({
theme: "minimal",
normalizeDelta: true,
scrollInertia: 300,
setTop:"800px",
})