一、修改谷歌google：

修改样式：

1.全局修改，所有滚动条生效：

::-webkit-scrollbar{width:6px;height:6px;

background-color: #00000040;

}

::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,1);border-radius:10px;}

::-webkit-scrollbar-track{background-color:transparent; }

2.针对某个容器来修改：

.mainPannel::-webkit-scrollbar{width:4px}
.mainPannel::-webkit-scrollbar-track{background-color:#ccc;}
.mainPannel::-webkit-scrollbar-thumb{background-color:#666;}

隐藏滚动条：

/* H5的时候，隐藏滚动条 */

// ::-webkit-scrollbar {

//  display: none;

//  width: 0 !important;

//  height: 0 !important;

//  -webkit-appearance: none;

//  background: transparent;

// }

二、修改火狐Firefox：

修改火狐滚动条样式的css属性只有 scrollbar-color 和 scrollbar-width 。

scrollbar-color: auto; /* 使用浏览器默认的滚动条样式 */

scrollbar-color: dark; /* 使用浏览器默认的深色或者黑色滚动效果 */

scrollbar-color: light; /* 使用浏览器默认的浅色滚动效果 */

scrollbar-color: red #00f; /* 第一个颜色为滚动条的颜色，第二个颜色为滚动条轨道的颜色 */

scrollbar-width: auto; /* 使用浏览器默认的滚动宽度 */

scrollbar-width: thin; /* 设置比默认滚动条宽度更窄的宽度 */

scrollbar-width: none; /* 隐藏滚动条，但是元素还是可以滚动 */

scrollbar-width: 66px; /* 直接设置滚动条的宽度，比如 60px 3vh 4wh 5rem 6rm 等长度 */

修改宽度（高度）如果单位是px，我尝试的时候好像并不会生效，只有auto、thin、none，不知道是不是官方取消了。

隐藏滚动条：

scrollbar-width: none; //添加到overflow的节点上。

css 修改浏览器滚动条样式（火狐Firefox，谷歌google）相关推荐

CSS修改浏览器滚动条样式
可以修改滚动条的以下样式: 1.颜色: 2.宽度: 3.阴影: 3.边框样式. CSS代码如下: <style> body { height: 3000px; } body::-webki ...
Vue项目修改浏览器滚动条样式
Vue+Element组件修改浏览器滚动条样式前言:在Vue项目中会有使用到滚动条的情况,但是会遇到原生滚动条的样式不满足UI设计,因此需要改变滚动条的样式,下面使用两种方式来修改滚动条的样式,以V ...
修改浏览器滚动条样式(兼容IE)
通常为了满足页面整体的风格的情况下,需要修改滚动条的颜色,各大视频网站都是以添加自定义滚动条的方式来满足,其实也可以理解,毕竟好像就只要添加一两个而已.如果是做管理系统或者其它需要多处修改浏览器滚动条 ...
原来如此？修改浏览器滚动条样式
粘贴复制使用 /* 修改浏览器滚动条样式 */ ::-webkit-scrollbar {width: .4rem;height: .4rem;background: hsla(0, 0%, 100% ...
自定义浏览器css,CSS自定义浏览器滚动条样式
前言最近在使用Chrome浏览器访问QQ会员的官网时候发现网站的浏览器默认侧边滚动栏变成了如下图所示的样式,后来上网去查询了一下,然后得知该样式是可以通过CSS来设计的,于是就是自己捣鼓了一下. / ...
用CSS控制浏览器滚动条样式源代码
1．overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值).scroll.hidd ...
html滚动条样式自定义,CSS自定义浏览器滚动条样式
前言最近在使用Chrome浏览器访问QQ会员的官网时候发现网站的浏览器默认侧边滚动栏变成了如下图所示的样式,后来上网去查询了一下,然后得知该样式是可以通过CSS来设计的,于是就是自己捣鼓了一下. 该 ...
修改浏览器滚动条样式
/定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸兼容谷歌和360/ ::-webkit-scrollbar { width: 16px; height: 16px; background-col ...
css 默认显示滚动条,css控制默认滚动条样式
针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...

css 修改浏览器滚动条样式（火狐Firefox，谷歌google）

一、修改谷歌google：

二、修改火狐Firefox：

css 修改浏览器滚动条样式（火狐Firefox，谷歌google）相关推荐

最新文章

热门文章