当前位置: 首页 > Web前端 > CSS

解决chrome滚动条背景问题

时间:2023-03-31 13:36:04 CSS

大家都知道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中添加一个width:100vw就可以解决这个问题,但是在这种情况下,会出现水平滚动条。所以我们需要去掉水平滚动条。链接如下:http://jianxiujiucan.cn/test/...但是这样写在背景图设置为fixed时不生效(具体原因还在研究中)。