使用Dialog时让页面层使用了 JQ插件mCustomScrollbar滚动条固定

最新推荐文章于 2021-03-17 09:46:38 发布

Ace_with_Yu

最新推荐文章于 2021-03-17 09:46:38 发布

阅读量474

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery vue 文章标签： JQ mCustomScrollbar VueCropper vue Dialog

本文链接：https://blog.youkuaiyun.com/Ace_with_Yu/article/details/97001116

vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

本文介绍如何在使用Dialog时解决mCustomScrollbar插件导致的滚动条与鼠标滚轮冲突问题，通过在Dialog显示与隐藏时分别禁用和恢复页面滚动功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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",
})