css修改谷歌浏览器和火狐浏览器的滚动条样式

css代码

谷歌浏览器滚动条样式：

::-webkit-scrollbar {background: #f7f7f9;width: .08rem;  /* 纵向滚动条滑块宽度 */height: .09rem; /* 横向滚动条滑块宽度 */
}
::-webkit-scrollbar-track-piece { /*滚动条背景颜色*/background: #f7f7f9;
}
::-webkit-scrollbar-thumb { /* 滑块 */border-radius: .1rem;background: #e5e5e5;
}
// 也可以单独设置横向滚动条和纵向滚动条的背景颜色
::-webkit-scrollbar-thumb:vertical { /* 纵向滑块 */background: #e5e5e5;
}
::-webkit-scrollbar-thumb:horizontal { /* 横向滑块 */background: #e5e5e5;
}

火狐浏览器滚动条样式：

* {scrollbar-color: #e5e5e5 #f7f7f9; /* 滑块颜色  滚动条背景颜色 */scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
}

效果图
谷歌浏览器效果

火狐浏览器效果

其他浏览器
IE浏览器都不支持这些属性，所以在IE浏览器下滚动条没办法用css设置，其他浏览器暂时没试过，大家可以自己尝试。

css修改谷歌浏览器和火狐浏览器的滚动条样式相关推荐

兼容edge、谷歌和火狐浏览器的滚动条样式纯css实现
整个页面的多个块都可以使用这个自定义滚动条 *::-webkit-scrollbar {width: 3px;background-color: #eee; }*::-webkit-scrollbar ...
火狐浏览器设置_[教程] 在谷歌浏览器和火狐浏览器里配置DoH加密DNS流量提高安全性...
前文我们提到微软正在为Windows 10系统开发DoH支持,只是现在还不清楚具体会在哪个版本里带来这个功能. DoH功能旨在加密 DNS 查询流量避免被运营商或中间人攻击和劫持,因此使用该协议有助于 ...
浏览器自定义滚动条样式
当一段文本过长,使用overflow:auto属性后,这段文本所在区域将会出现滚动条.有时候,我们需要自定义浏览器的滚动条样式,可以使用css3的scrollbar-thumb属性来实现. 首先看一下 ...
bootstrap table表头错位，火狐浏览器下滚动条挤像素问题解决方案。
首先这篇文章是一个关于bootstrap table的七零八碎各种bug的内容,后续可能会接着更新编辑. 1:前后端分离项目,后端往往要求前端请求后端时,携带着登陆时后端给你的token. boots ...
谷歌浏览器和火狐浏览器永久禁用缓存【一劳永逸的解决方式】
目录前言谷歌浏览器方式一方式二火狐浏览器前言缓存对于开发人员来说异常的痛苦,很多莫名其妙的bug就是由缓存导致的,但当我们在网上查找禁用缓存的方式时,找到的方式大多数都是在开发者工具的面 ...
Mac电脑使用：删除保存在Mac电脑自带的Safari浏览器、谷歌浏览器、火狐浏览器中的账号和密码的方法
掌握删除保存在浏览器中的账号和密码的方法很重要,尤其是你在公司电脑上面存储的密码,万一哪天你离职了,一定要清理电脑浏览器上面存储的各种关于你自己的账号密码,如果不清理就会被别人使用,所以如果不是你私人 ...
IDEA设置谷歌浏览器和火狐浏览器打开
我们在软件的功能栏中选择file,然后使用鼠标点击settings,进入到软件的详细设置界面进入后,我们可以看到很多设置项,然后我们使用鼠标依次点击左侧的tools和web browsers,进入到 ...
6666端口，地址访问谷歌浏览器，火狐浏览器限制
部署新的网站,用了个6666端口,用谷歌,火狐浏览器都被限制了后百度了一下,6666-6669端口是IRC协议使用的缺省端口,存在安全风险,容易被木马等程序利用,应该是出于安全考虑,谷歌,火狐浏览器 ...
修改谷歌和火狐浏览器滚动条的样式
在css 文件里定义样式: .mat-tab-body-content { ... /*---------谷歌----------*/ &::-webkit-scrollbar { width ...

css修改谷歌浏览器和火狐浏览器的滚动条样式

css修改谷歌浏览器和火狐浏览器的滚动条样式相关推荐

最新文章

热门文章