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

75 阅读 0 评论 50 点赞

我是靠谱客的博主生动苗条，最近开发中收集的这篇文章主要介绍几行代码轻松解决滚动条样式问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

第一步：你需要在样式<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;）

转载于:https://www.cnblogs.com/Loveonely/p/7831555.html

以上就是生动苗条为你收集整理的几行代码轻松解决滚动条样式问题的全部内容，希望文章能够帮你解决几行代码轻松解决滚动条样式问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。