HTML + JQUERY的mCustomScrollbar插件实现滚动条，兼容火狐浏览器

 

 

需求

最近做的一个项目，客户要求浏览器端要自定义滚动条宽高，几经折腾使用css方式实现了谷歌浏览器端口，但始终无法兼容火狐，最后使用一个JQuery.mCustomScrollbar插件解决了。

实现方法

不说太多废话直接上代码。

  <!-- 直接在body上添加滚动条 -->
  <link href="./jquery.mCustomScrollbar.css?v=1.0.0" rel="stylesheet">
  <script src="./jquery.mCustomScrollbar.concat.min.js"></script>
  <style>
      body {
          height: 100%;
      }
      body .mCustomScrollBox > .mCSB_scrollTools{
          width: 10px;
          z-index: 200;
      }
      body .mCSB_scrollTools .mCSB_draggerContainer,body .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,body .mCSB_scrollTools .mCSB_draggerRail{
          width: 100%;
      }
      body .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
          background:Orange;
      }
      body .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
          background:rgba(255, 166, 0, 0.535);
      }

      /* 下面这句是鼠标拖动到窗口外面的样式 */
      body .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, body .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
          background:rgba(255, 166, 0, 0.535);
          
      }