滾動條插件---jquery.nicescroll.js 簡單使用

// 引入下載好的js文件

<script src="./js/jquery.nicescroll.min.js"></script>

<script>

//因為在同一個頁面有tab切換項都需要使用滾動條，遇到一個問題，就是在點擊下一個切換項的時候，上一個切換項的滾動條不會立即消失，所以給每一個切換項設置點擊效果，添加和刪除類名。

//注意：如果沒有給不同的切換項添加上類名的話，滾動條是不會顯示的，所以在開始就要給他們添加上需要的類名，在點擊的時候在去刪除或者添加類名，這樣就不會出現前面滾動條不會立即消失的問題了

$('.clickHu').click(function () {

  $('#wrapper1').addClass('wrapper1')

  $('#wrapper2').removeClass('wrapper2')

})

$('.clickP').click(function () {

  $('#wrapper1').removeClass('wrapper1')

  $('#wrapper2').addClass('wrapper2')

})

//設置滾動條

$('.wrapper1').niceScroll({

  // 設置滾動條顏色

  cursorcolor: "#2a72f5",

  // 滾動條最大透明度

  cursoropacitymax: 1,

  //使光標拖動滾動像在台式電腦觸摸設備 true滾動條拖動不可用 

  touchbehavior: false,

  // 滾動條寬度

  cursorwidth: "10px",

  // 滾動條邊框

  cursorborder: "0",

  // 滾動條圓角

  cursorborderradius: "5px",

  // 軌道背景色

  background: "#bdbdbd",

  // 隱藏滾動條的方式，可用的值：true|無滾動時隱藏，"cursor"|隱藏，false|不隱藏，"leave"|僅在指針離開內容時隱藏，"hidden"|一直隱藏，"scroll"|僅在滾動時顯示

  autohidemode: false

})

</script>