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