几行代码轻松解决滚动条样式问题

Posted 2020-10-14 简单一生，快乐一生

第一步：你需要在样式<style></style>标签中插入如下代码

/* 设置滚动条的样式 */

::-webkit-scrollbar {
width: 5px;
height: 5px;
}

/* 滚动槽 */

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

第二步：给容器加样式

overflow:auto;（或者overflow-y:auto;或者overflow-x:auto;）