css 用于浏览器的滚动条样式,仅支持那些WebKit的浏览器,如Chrome浏览器
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 用于浏览器的滚动条样式,仅支持那些WebKit的浏览器,如Chrome浏览器相关的知识,希望对你有一定的参考价值。
/* 滚动条 */
::-webkit-scrollbar-thumb:horizontal { /* 水平滚动条的样式 */
width: 5px;
background-color: #2F343F;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-track-piece {
background-color: #2F343F; /* 滚动条的背景颜色 */
-webkit-border-radius: 0; /* 滚动条的圆角宽度 */
}
::-webkit-scrollbar {
width: 8px; /* 滚动条的宽度 */
height: 8px; /* 滚动条的高度 */
}
::-webkit-scrollbar-thumb:vertical { /* 垂直滚动条的样式 */
height: 50px;
background-color: #565B62;
-webkit-border-radius: 0;
outline: 2px solid #01201f;
outline-offset: -2px;
}
::-webkit-scrollbar-thumb:hover { /* 滚动条的 hover 样式 */
height: 50px;
background-color: #565B7F;
-webkit-border-radius: 0;
}
以上是关于css 用于浏览器的滚动条样式,仅支持那些WebKit的浏览器,如Chrome浏览器的主要内容,如果未能解决你的问题,请参考以下文章
CSS3修改滚动条样式
CSS3自定义滚动条样式 -webkit-scrollbar
css代码怎样改变火狐浏览器中滚动条样式
css代码怎样改变火狐浏览器中滚动条样式
怎么用css设置火狐浏览器默认滚动条样式
css样式问题:满足所有浏览器隐藏滚动条