火狐浏览器滚动条兼容问题

在日常开发中，我们经常会用到 overflow: scroll;

但浏览器自带的默认滚动条很难看，因此我们会需要美化它

方法一：自定义美化

谷歌 chrome 浏览器美化滚动条方法：（网上有很多种美化方法，此为一种）

.scrollbar {overflow: auto;float: left;border: none;
}.scrollbar::-webkit-scrollbar {display: block;  /* 显示隐藏滚动条 */width: 5px;  /* 高宽分别对应横竖滚动条的尺寸 */height: 1px;
}.scrollbar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 50px;-webkit-box-shadow: inset 0 0 5px #18223E;background: #535353;
}.scrollbar::-webkit-scrollbar-track {/*滚动条里面轨道*/border-radius: 50px;-webkit-box-shadow: inset 0 0 5px #101728;background: #EDEDED;
}

注：如果不想要滚动条，可以设置属性

.scrollbar::-webkit-scrollbar {display: none;  /* 隐藏滚动条 */
}

火狐浏览器美化滚动条方法：可以尝试设置以下参数

.scrollbar {scrollbar-3d-light-color: initial; /*设置或检索滚动条亮边框颜色*/scrollbar-highlight-color: initial; /*设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色*/scrollbar-face-color: initial; /*设置或检索滚动条3D表面（ThreedFace）的颜色*/scrollbar-arrow-color: initial; /*设置或检索滚动条方向箭头的颜色*/scrollbar-shadow-color: initial; /*设置或检索滚动条3D界面的暗边（ThreedShadow）颜色*/scrollbar-dark-shadow-color: initial; /*设置或检索滚动条暗边框（ThreedDarkShadow）颜色*/scrollbar-base-color: initial; /*设置或检索滚动条基准颜色。其它界面颜色将据此自动调整*/
}

注：如果不想要滚动条，可以设置属性 scrollbar-width: none;

方法二：插件美化

以下为jquery.nicescroll官网：
https://nicescroll.areaaperta.com/how-to-use/

引入 jquery 和 jquery.nicescroll

npm install jquery
npm install jquery.nicescroll

使用

$("body").niceScroll();

$("body").niceScroll({cursorcolor:"aquamarine",cursorwidth:"16px"
});v

在某些情况下，当您从其他库（如jquery UI，无限滚动等）中按大小调整/隐藏/显示内容添加nicescroll时，您需要在内容更改或div修改/隐藏/显示时通知nicescroll。

$("scrolldiv>").getNiceScroll().resize();

niceScroll 使用指南：

https://www.hangge.com/blog/cache/detail_1931.html

https://www.cnblogs.com/duanzhenzhen/p/11125109.html

火狐浏览器滚动条兼容问题相关推荐

php 兼容火狐,PHP_CSS兼容IE与火狐浏览器超强兼容代码，如何让你写的代码更兼容火狐 - phpStudy...
CSS兼容IE与火狐浏览器超强兼容代码如何让你写的代码更兼容火狐和IE两大主流浏览器?本文将总结总结CSS中火狐浏览器与IE浏览器的兼容代码,兼容你兼容主要是语法规范问题,你写CSS写规范了,就都兼 ...
JavaScript自定义浏览器滚动条兼容IE、火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
【浏览器兼容】火狐浏览器滚动条不出现问题
在做一个网站项目时,遇到谷歌.Opera 浏览器滚动条显示正常,但火狐浏览器自带滚动条不显示的情况, 处理代码如下: body { width: 100vw; height: 100vh; ...
火狐浏览器不兼容event问题
除了Chrome浏览器,其他浏览器不兼容event. eg: 1 <a @click="test(event)"> 如上方法,火狐浏览器会报event is not u ...
修改火狐浏览器滚动条样式
一.安装jquery和niceScroll ① npm install jquery ②在vue.config.js中添加如下代码 (如报ReferenceError: webpack is not ...
如何下载安装与火狐浏览器不兼容的火狐浏览器插件
首先我们在火狐的插件仓库里寻找自己需要的插件点我进入插件仓库我们可以看到这个插件和火狐浏览器当前版本不兼容,它不允许我们下载了,其实我们只要点击我标出的按钮,进入下一个页面进入页面审查元素 ...
vue解决火狐浏览器滚动条问题
1.作者是在实现左侧菜单时发现这个问题的,在火狐浏览器上会出现滚动条,这是火狐自带的解决方法:在相关盒子的css上加上一下代码 overflow-y: scroll;scrollbar-color: ...
火狐浏览器滚动条样式修改 css
纯css设置Firefox火狐浏览器的滚动条样式设置Firefox滚动条样式的css属性只有 scrollbar-color 和 scrollbar-width 这两个.看名字就知道第一个是设置滚动 ...
selenium 打开火狐浏览器版本兼容问题踩的坑
我采用的是selenium2.53.1,firefox v67,geckodriver-v0.24.0,一直报driver.version: FirefoxDriver,版本不兼容.将火狐浏览器降低版 ...

火狐浏览器滚动条兼容问题

火狐浏览器滚动条兼容问题相关推荐

最新文章

热门文章