Vue自定義滾動條niceScroll

參考**：

安裝jquery依賴npm install jquery在webpack.config.js中新增以下**，並重新執行

/ 新增**
plugins:
[new webpack.
provideplugin()
],

安裝jquery.nicescroll依賴npm install jquery.nicescroll在main.js中引入jquery與nicescroll

import 'jquery' import

'jquery.nicescroll'

3.在mounted中寫呼叫nicescroll()方法

$(
".box").
nicescroll()
;

$( ".box" ).nicescroll（ ,//為rail bar disableoutline 設定填充: true ,//對於chrome瀏覽器，在選擇帶有nicescroll horizrailenabled 的div時禁用輪廓（橙色突出顯示）: true ,//nicescroll可以管理水平滾動 railrailalign:右, //垂直軌道的對齊 railvalign: bottom, //水平軌道的對齊 enabletranslate3d: true ,// nicescroll可以使用css轉換來滾動內容 enablemousewheel: true ,// nicescroll可以管理滑鼠滾輪events enablekeyboard: true ,// nicescroll可以管理鍵盤事件 smoothscroll: true ,//輕鬆滾動移動感性rail: true ,//單擊rail進行滾動 enablemouselockapi: true ,//可以使用滑鼠標題鎖定api（與物件拖動相同的問題） cursorfixedheight: false ,//以畫素為單位設定游標的固定高度 hidecursordelay : 400, //設定以微秒為單位的延遲以使滾動條淡出 directionlockdeadzone:6, //方向鎖定啟用的死區（以畫素為單位） nativeparentscrolling: true ,//檢測內容的底部並使父級滾動，因為本機滾動會啟用 scrollonselection : true ,//當選擇文字時啟用內容的自動滾動 cursordragspeed: 0.3, //用游標 rtlmode 拖動時的選擇速度: "自動" ,//水平div滾動從左側的游標開始 dragontouch : false ,//以觸摸/觸控行為模式拖動游標以及 oneaxismousemode: "auto" ,// //允許使用滑鼠滾輪在僅水平內容上進行水平滾動，如果false（僅垂直）滑鼠滾輪不進行水平滾動，如果value為auto，則檢測到兩軸滑鼠指令碼路徑："" //為boxmode定義自定義路徑圖示（「」=>相同的指令碼路徑） preventmultitouchscrolling: 真 //防止滾動的多點觸控事件 disablemutationobserver:假 //力mutationobserver禁用， enableobserver:真 //啟用dom更改觀察者，它會在父級或內容div更改 scrollbarid 時嘗試調整大小/隱藏/顯示: false //為nicescroll bar設定自定義id

}）;

應用示例：

設定某div樣式並更改游標顏色：
$(function()
);}）;

Vue自定義滾動條niceScroll

自定義滾動條

自定義滾動條

自定義滾動條

相關推薦