本文最后更新于：2023年1月12日下午

添加自定义滚动条

很多时候，系统自带的效果总是丑的不行，例如滚动条。当内容超出容器时，就会出现滚动条（水平或垂直），接下来我们就用css来干掉这个系统原始的滚动条。

滚动条样式主要由三部分组成：

::-webkit-scrollbar 定义滚动条整体的样式
::-webkit-scrollbar-thumb 滑块部分
::-webkit-scrollbar-track 轨道部分

设置滚动条宽高

::-webkit-scrollbar {
  width: 10px;
  height: 400px;
}

设置滑块样式

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #535353;
}

设置轨道样式

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #EDEDED;
}

如果需要用到自定义的容器中

html示例代码

<ul>
    <li>自定义容器</li>
    <li>自定义容器</li>
    ...
</ul>

css示例代码

ul {
    height: 400px;
    overflow-y: auto; //auto 当容器内容没有超过设定的高度时，不会出现滚动条 scroll 不管有无内容都会出现滚动条 
    overflow-x: hidden //这里我隐藏了水平上的滚动条
}
//设置滚动条宽高
ul::-webkit-scrollbar {
    width: 10px;
    height: 380px;
}
//设置滑块样式
ul::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #535353;
}
//设置轨道样式
ul::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #EDEDED;
}