学无先后,达者为师

网站首页 编程语言 正文

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

作者:啃代码的毛毛虫 更新时间: 2023-10-17 编程语言

一、安装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/

原文链接:https://blog.csdn.net/mao0523/article/details/124661133

  • 上一篇:没有了
  • 下一篇:没有了
栏目分类
最近更新