Chrome滚动条透明的问题

简介: 在做一个小应用的时候,给一个面板设置了透明度(opacity:.9),在浏览页面的时候,发现滚动条居然透明了,如下图所示: 然后想是不是可以使用自定义来解决这个问题,找到这篇文章--《不用装扩展也可自定义Chrome滚动条的样式》 ::-webkit-scrollbar-track-p...

在做一个小应用的时候,给一个面板设置了透明度(opacity:.9),在浏览页面的时候,发现滚动条居然透明了,如下图所示:

image

然后想是不是可以使用自定义来解决这个问题,找到这篇文章--《不用装扩展也可自定义Chrome滚动条的样式

::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}
::-webkit-scrollbar{
width:8px;
height:8px;
}
::-webkit-scrollbar-thumb{
height:50px;
background-color:#999;
-webkit-border-radius:4px;
outline:2px solid #fff;
outline-offset:-2px;
border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}

现在的效果,如下图所示:

image

目录
相关文章
|
1月前
高亮提示、聚焦控件并滚动到浏览器中刚刚好可以查看到该控件的位置
高亮提示、聚焦控件并滚动到浏览器中刚刚好可以查看到该控件的位置
|
9月前
|
Web App开发 JavaScript iOS开发
iOS Safari 浏览器 100vh 带有滚动条解决方案
iOS Safari 浏览器 100vh 带有滚动条解决方案
463 0
|
Web App开发 前端开发
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
340 0
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
获取浏览器窗口高度和宽度兼容IE
获取浏览器窗口高度和宽度兼容IE
|
前端开发
产生垂直滚动条和修改滚动条的样式兼容谷歌和火狐
我们为什么会处理浏览器滚动条的样式了? 因为浏览器的滚动条,会影响页面的宽哈; 当页面的宽度发生变化时,那么页面的内容排版就会发生变化! 所以我们必须处理浏览器
产生垂直滚动条和修改滚动条的样式兼容谷歌和火狐
|
Web App开发 程序员
推荐一个可以把网页背景色调成护眼色的Chrome扩展应用
推荐一个可以把网页背景色调成护眼色的Chrome扩展应用
|
vr&ar
ie8浏览器下透明度处理
css3新增属性rgba和opacity:(0~1); 在ie8下无法使用、Alpha(opacity=[0~100]);//[0~100] 0是透明 100是不透明。 IE下的透明度属性,子元素会继承这个透明度。下面有阻断子元素继承方法。
294 0
ie8浏览器下透明度处理
页面自适应浏览器宽高
autodivheight(); function autodivheight() { //函数:获取尺寸 //获取浏览器窗口高度 var winHeight = 0; if (window.
1050 0
|
Android开发 数据格式 XML
安卓阴影最佳解决方案,原生CardView修改阴影颜色和上下阴影比例
CardviewFix 简书地址 [https://www.jianshu.com/p/8c8b2708bdb4] 原生的CardView虽然好,但是公司UI设计必须修改阴影颜色 这个库是基于google官方库,所以基本属性相同,增加三个属性,暂时只.
6886 0