jQuery - 滚动条插件 NiceScroll 使用详解（滚动条美化）

1. 火狐浏览器下无法通过修改css来修改滚动条的样式，可以通过插件的方法来达到目的
2. Nicescroll支持横向滚动条和纵向滚动条

页面需要引入

页面中引入 jquery.js
页面中引入 jquery.nicescroll.js

css

 .ul {
  height:200px
  }
    li {
      height: 50px;
    }

html

<ul class="ul">
      <li>条目1</li>
      <li>条目2</li>
      <li>条目3</li>
      <li>条目4</li>
      <li>条目5</li>
    </ul>

基本配置项

var scrollOption={ // 滚动条配置项
cursorborder:'', // 滚动条边框
cursorcolor:'#e2e2e2', // 滚动条颜色
boxzoom:false,  // 禁止双击时，容器变大
autohidemode:false // 有滚定条的时候，一直显示
}
 $(document).ready( // 注意：需要放在这个里面进行初始化
        function() {
          $("html").niceScroll(scrollOption); // 整个页面的滚动条
            $(".ul").niceScroll(scrollOption); // ul处的滚动条
        }
      );

借鉴自：https://www.hangge.com/blog/cache/detail_1931.html