滾動條插件 nicescroll 的使用

最近寫項目需要美化頁面的滾動條，於是接觸了nicescroll這個滾動條美化插件。具體用法如下圖代碼所示：

/*美化滾動條*/
function scroll(id){
    $(id).niceScroll({
        cursorcolor:"#1c4780", // 滾動條顏色，使用16進制顏色值
        cursoropacitymax: 1,  // 當滾動條是顯示狀態時改變透明度，值範圍1到0
        touchbehavior:false,
        cursorwidth:"10px", // 滾動條的寬度，單位：像素
        cursorborder:"0", // CSS 方式定義滾動條邊框
        cursorborderradius:"5px" // 滾動條圓角（像素）
    });
}

其他一些配置項：

  cursoropacitymin: 0,  // 當滾動條是隱藏狀態時改變透明度，值範圍1到0
  autohidemode: true,  // 隱藏滾動條的方式，可用的值：true|無滾動時隱藏，"cursor"|隱藏，false|不隱藏，"leave"|僅在指針離開內容時隱藏，"hidden"|一直隱藏，"scroll"|僅在滾動時顯示
  cursoropacitymin: 0,  // 當滾動條是隱藏狀態時改變透明度，值範圍1到0
  cursorminheight: 32,  // 設置滾動條的最小高度（像素）
  enablescrollonselection: true,  // 當選擇文本時激活內容自動滾動
  cursordragspeed: 0.3,  // 設置拖拽的速度
  cursordragontouch: false,  // 使用觸屏模式來實現拖拽

    

希望這篇博文能對大家有所幫助！