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

2021-08-21 05:51:07 字數 777 閱讀 8167

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

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

最簡單的用法如下:

$(document).ready(

function

() );

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

滾動條可以隱藏和顯示:

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

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

檢測滾動條是否重置大小(當視窗改變大小時):

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

開發過程遇到問題:

1.雙層div,內層div滾動時同側會出現兩個滾動條

原因:內層div設定了高度,新增了乙個滾動條

解決:內層div不設定高度(如果為橫向滾動則不設定寬度,最好高度和寬度都不設定)

2.手機端拖拽無法啟用滾動條

原因:未明

解決:在載入時先設定滾動條顯示:$("#mydiv").getnicescroll().show();

然後再重置滾動條大小:$("#mydiv").getnicescroll().resize();

這兩個問題困擾了我一天,希望可以給其他有同類問題的朋友一些啟發。

參考**:

Nicescroll滾動條外掛程式的用法

nicescroll滾動條外掛程式是乙個非常強大的基於jquery的滾動條外掛程式,不需要增加額外的css,幾乎全瀏覽器相容。ie6 實現只需要一段 侵入性非常小,樣式可完全自定義,支援觸控事件,可在觸控螢幕上使用。引入核心檔案,外掛程式需要引入1.5.x以上版本的jquery庫 最簡單的用法如下 ...

Vue自定義滾動條niceScroll

參考 安裝jquery依賴npm install jquery在webpack.config.js中新增以下 並重新執行 新增 plugins new webpack.provideplugin 安裝jquery.nicescroll依賴npm install jquery.nicescroll在m...

jquery滾動條外掛程式slimScroll

引數 width auto 可滾動區域寬度 height 100 可滾動區域高度 size 10px 元件寬度 color 000 滾動條顏色 position right 元件位置 left right distance 0px 元件與側邊之間的距離 start top 預設滾動位置 top bo...