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样式问题:满足所有浏览器隐藏滚动条