Nicescroll滾動條插件是一個非常強大的基于JQUERY的滾動條插件，不需要增加額外的css，幾乎全瀏覽器兼容。ie6+，實現(xiàn)只需要一段代碼，侵入性非常小，樣式可完全自定義，支持觸摸事件，可在觸摸屏上使用。

官網(wǎng)地址：http://www.areaaperta.com/nicescroll/

引入核心文件，插件需要引入1.5.X以上版本的jquery庫

最簡單的用法如下：

$(document).ready(
? function() {
??? $("html").niceScroll(); });

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

滾動條可以隱藏和顯示：

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

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

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

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

開發(fā)過程遇到問題：

1.雙層div,內(nèi)層div滾動時同側(cè)會出現(xiàn)兩個滾動條

原因：內(nèi)層div設(shè)置了高度，新增了一個滾動條

解決：內(nèi)層div不設(shè)置高度（如果為橫向滾動則不設(shè)置寬度，最好高度和寬度都不設(shè)置）

2.手機端拖拽無法激活滾動條

原因：未明

解決：在加載時先設(shè)置滾動條顯示：$("#mydiv").getNiceScroll().show();

? ? ? ?? 然后再重置滾動條大小：$("#mydiv").getNiceScroll().resize();

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

參考網(wǎng)址：https://www.cnblogs.com/jinqi79731/p/nicescroll.html

總結(jié)

以上是生活随笔為你收集整理的Nicescroll滚动条插件手机端问题总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。