修改webkit内核浏览器滚动条

CSS滚动条样式定制

最新推荐文章于 2018-11-23 10:39:57 发布

原创最新推荐文章于 2018-11-23 10:39:57 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#滚动条修改

其他专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种通过CSS实现自定义滚动条样式的技巧。通过对::-webkit-scrollbar、::-webkit-scrollbar-thumb及::-webkit-scrollbar-track-piece伪元素的设置，可以精细地调整滚动条的外观，包括宽度、背景颜色及渐变效果等。

::-webkit-scrollbar{
    width: 30px;
height: 30px;
}
::-webkit-scrollbar-thumb{
    border-radius:9999px;
background:linear-gradient(#3D4450,#6b778c) repeat scroll 0 0 #3D4450;
}
::-webkit-scrollbar-track-piece{
    border-right:1px solid #EEE;
    border-left:1px solid #e4e4e4;
    background-color:#f0f0f0;
    background-image:-webkit-linear-gradient(left,#f0f0f0,#FFF);
}