解决chrome滚动条背景的问题

你们都知道chrome能够自定义设置滚动条的样式,能够修改不少参数。
主要的两行样式的代码以下:css

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

当咱们给滚动条背景设置了样式以后,页面的滚动条即使设计了透明度,也仍是会有白色的底色html

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

如图:
图片描述web

连接以下:http://jianxiujiucan.cn/test/...chrome

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

你们知道有一个单位叫vw,就是网页的可视区域宽度,它的宽度其实包括了滚动条的宽度。
而body默认的宽度没有包含滚动条的宽度。
滚动条底下的白色其实并非滚动条的背景色,而是因为body的宽度并未铺满可视区域的留白。
因此咱们只要在body上加一个width:100vw 便可解决这个问题,可是这种状况下,会出现横向的滚动条。
因此咱们须要把横向的滚动条去掉。设计

图片描述

连接以下:http://jianxiujiucan.cn/test/...code

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

相关文章
相关标签/搜索