使用Dialog時 讓頁面層使用了 JQ插件mCustomScrollbar滾動條固定

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章