解决chrome滚动条背景的问题

大家都知道chrome可以自定义设置滚动条的样式,可以修改很多参数。
主要的两行样式的代码如下:

::-webkit-scrollbar{} 
::-webkit-scrollbar-thumb{} /* 滚动条滑块 */

当我们给滚动条背景设置了样式之后,页面的滚动条即便设计了透明度,也还是会有白色的底色

::-webkit-scrollbar{width:12px;background:transparent;}
::-webkit-scrollbar-thumb{background:#ccc;border-radius: 6px;}

如图:
图片描述

链接如下:http://jianxiujiucan.cn/test/...

这个白色的底色与背景会格格不入,怎么样才能把滚动条的颜色去掉呢?

大家知道有一个单位叫vw,就是网页的可视区域宽度,它的宽度其实包括了滚动条的宽度。
而body默认的宽度没有包含滚动条的宽度。
滚动条底下的白色其实并不是滚动条的背景色,而是由于body的宽度并未铺满可视区域的留白。
所以我们只要在body上加一个width:100vw 即可解决这个问题,但是这种情况下,会出现横向的滚动条。
所以我们需要把横向的滚动条去掉。

图片描述

链接如下:http://jianxiujiucan.cn/test/...

但是这样写在背景图设置为fixed的时候并不生效(具体原因还在研究中)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值