Nicescroll滾動條外掛程式的用法

nicescroll滾動條外掛程式是乙個非常強大的基於jquery的滾動條外掛程式，不需要增加額外的css，幾乎全瀏覽器相容。ie6+，實現只需要一段**，侵入性非常小，樣式可完全自定義，支援觸控事件，可在觸控螢幕上使用。

引入核心檔案，外掛程式需要引入1.5.x以上版本的jquery庫

最簡單的用法如下：

$(document).ready(
function
() );

注意：一定要放在 $(document).ready 中進行初始化！

隱藏滾動條

$("#mydiv").getnicescroll().hide();

檢測滾動條是否重置大小（當視窗改變大小時）

$("#mydiv").getnicescroll().resize();

滾動到某個位置

$(
"#mydiv").getnicescroll(0).doscrollleft(x, duration); //
scroll
xaxis
$("#mydiv").getnicescroll(0).doscrolltop(y, duration); //
scroll
yaxis

可增加各種引數

$(document).ready(
function
() );
});

配置參數列

$("#thisdiv").nicescroll(, // 設定軌道的內間距 disableoutline: true, // 當選中乙個使用nicescroll的div時，chrome瀏覽器中禁用outline horizrailenabled: true, // nicescroll可以管理水平滾動 railalign: right, // 對齊垂直軌道 railvalign: bottom, // 對齊水平軌道 enabletranslate3d: true, // nicescroll 可以使用css變型來滾動內容 enablemousewheel: true, // nicescroll可以管理滑鼠滾輪事件 enablekeyboard: true, // nicescroll可以管理鍵盤事件 smoothscroll: true, // ease動畫滾動 sensitiverail: true, // 單擊軌道產生滾動 enablemouselockapi: true, // 可以用滑鼠鎖定api標題 (類似物件拖動) cursorfixedheight: false, // 修正游標的高度（畫素） hidecursordelay: 400, // 設定滾動條淡出的延遲時間（毫秒） directionlockdeadzone: 6, // 設定死區，為啟用方向鎖定（畫素） nativeparentscrolling: true, // 檢測內容底部便於讓父級滾動 enablescrollonselection: true, // 當選擇文字時啟用內容自動滾動 cursordragspeed: 0.3, // 設定拖拽的速度 rtlmode: "auto", // div的水平滾動從左邊開始 cursordragontouch: false, // 使用觸屏模式來實現拖拽 oneaxismousemode: "auto", // 當只有水平滾動時可以用滑鼠滾輪來滾動，如果設為false則不支援水平滾動，如果設為auto支援雙軸滾動 scriptpath: "" // 為boxmode自定義路徑 ("" => same script path) preventmultitouchscrolling: true // 防止多觸點事件引發滾動

});

另外注意：當在同一頁面中使用多個nicescroll外掛程式時，要及時隱藏用完的nicescroll物件，載入時，需要先show,再resize。

當外掛程式放在具有absolute浮動的容器中，並設定了top值時，外掛程式的top會出現問題，解決方法使用外掛程式的railoffset屬性：

railoffset, you can add
offset top/left for rail position (default:false)

Nicescroll滾動條外掛程式的用法

Nicescroll滾動條外掛程式手機端問題總結

Vue自定義滾動條niceScroll

jquery滾動條外掛程式slimScroll

Nicescroll滾動條外掛程式的用法

Nicescroll滾動條外掛程式手機端問題總結

Vue自定義滾動條niceScroll

jquery滾動條外掛程式slimScroll

相關推薦