css：设置滚动条的样式

最新推荐文章于 2025-09-15 11:47:20 发布

原创最新推荐文章于 2025-09-15 11:47:20 发布 · 968 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

前端开发同时被 2 个专栏收录

64 篇文章

订阅专栏

css

18 篇文章

订阅专栏

本文介绍了如何使用CSS来定制网页滚动条的样式，包括设置滚动条的宽度、高度、背景颜色以及轨道和滑块的样式。通过透明背景，可以避免滚动条遮挡页面内容。示例代码展示了不同滚动条部分的详细设置，提供了简洁而优雅的滚动条设计方案。

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width:16px;
    height:16px;
    background-color:#F5F5F5;
}
/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:10px;
    background-color:#F5F5F5;
}
/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    background-color:#555;
}

参考：

css scrollbar样式设置

比如我设置滚动条背景色透明，数据就不会被遮住啦。

/*定义滚动条高宽及背景
  高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar
 {
     width:10px;
     height:10px;
     background-color:rgba(0,0,0,0.1);
 }
 /*定义滚动条轨道
  内阴影+圆角*/
 ::-webkit-scrollbar-track
 {
     /* -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1); */
     border-radius:5px;
     background-color:rgba(0,0,0,0);
 }
 /*定义滑块
  内阴影+圆角*/
 ::-webkit-scrollbar-thumb
 {
     border-radius:5px;
     /* -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1); */
     background-color:rgba(0,0,0,0.1);
 }

效果图：