前端滚动条样式调整及取消x轴滚动条

最新推荐文章于 2024-05-22 09:45:58 发布

原创最新推荐文章于 2024-05-22 09:45:58 发布 · 885 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用CSS自定义滚动条的样式，包括轨道、滑块的颜色及阴影效果，并提供了一个具体的实例。此外，还提供了取消x轴滚动条的方法。


::-webkit-scrollbar {
     width: 5px;
     height: 5px;
     background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
     border-radius: 10px;
     background-color: #ffffff00;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     background-color: #f2f2f2;
}

::-webkit-scrollbar-thumb:hover {
     background: #5c626c;
}

如需要取消x轴滚动条，可加如下样式：overflow: hidden auto;