修改火狐浏览器滚动条样式

一、安装jquery和niceScroll

① npm install jquery

②在vue.config.js中添加如下代码

(如报ReferenceError: webpack is not defined,请添加代码:var webpack = require('webpack');)

③npm install jquery.nicescroll

④在main.js中引用jq和niceScroll

二、设置谷歌火狐浏览器页面div滚动条样式(在mounted中设置)

//解决谷歌火狐div滚动条样式
    $("#box").niceScroll({
      cursorcolor:"#cbcbcb",
      cursoropacitymax:1,
      cursorwidth:5,
      cursorborder:"none",
      cursorborderradius:"4px",
      background:"transparent"
    });

三、设置element表格在火狐的混动条样式

//解决element表格在火狐的混动条样式

    if(this.judgeBrowser().indexOf('FF')>-1){

      $(".el-table__body-wrapper").niceScroll({

        touchbehavior:false,

        cursorcolor:"#cbcbcb",

        cursoropacitymax:1,

        cursorwidth:5,

        cursorborder:"none",

        cursorborderradius:"4px",

        background:"white",

        autohidemode:false

      });

    }
//判断浏览器类型
    judgeBrowser(){
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
      if (userAgent.indexOf("Opera") > -1) { //判断是否Opera浏览器
          return "Opera"
      }
      if (userAgent.indexOf("Firefox") > -1) { //判断是否Firefox浏览器
          return "FF";
      }
      if (userAgent.indexOf("Chrome") > -1) { //判断是否为谷歌浏览器
          return "Chrome";
      }
      if (userAgent.indexOf("Safari") > -1) { //判断是否Safari浏览器
          return "Safari";
      }
      if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { //判断是否IE浏览器
          return "IE";
      }
    }

Nicescroll官网地址:http://www.areaaperta.com/nicescroll/


版权声明:本文为mao0523原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。