一、安装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版权协议,转载请附上原文出处链接和本声明。