2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 修改火狐浏览器滚动条样式

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

时间:2024-03-18 20:22:14

相关推荐

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

一、安装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官网地址:/nicescroll/

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。