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

本文介绍如何在使用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",
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值