前言

今天学习一下当内容超出固定高度或宽度的容器时，设置全局的滚动条的样式

提示：以下是本篇文章正文内容，下面案例可供参考

一、样式展示

二、使用如下：

1.代码

::-webkit-scrollbar {width: 6px;}::-webkit-scrollbar-track{background: #163361;border-radius: 3px;}::-webkit-scrollbar-thumb {background: #409EFF;border-radius: 3px;}

2.代码讲解

3. 完整代码

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.wrapper{width: 400px;height: 200px;overflow-y: scroll;}::-webkit-scrollbar {width: 6px;height: 6px;}::-webkit-scrollbar-track{background: #163361;border-radius: 3px;}::-webkit-scrollbar-thumb {background: #409EFF;border-radius: 3px;}</style></head><body><div class="wrapper"><div>Lorem ipsum dolor sit amet.</div><div>Sequi ratione vitae? Rerum eveniet.</div><div>Consectetur quia facilis debitis dolore.</div><div>Tempore maxime ad quas nam.</div><div>Iure repellat animi eos quae?</div><div>Impedit voluptas minima dicta qui?</div><div>Nihil ipsum voluptatibus vero porro.</div><div>Repudiandae ea quia blanditiis doloribus.</div><div>Culpa sit nam soluta incidunt.</div><div>Enim modi eius omnis fuga!</div><div>Vero autem quos quas vitae.</div><div>Optio vitae molestiae nostrum saepe.</div><div>Quis assumenda adipisci iure suscipit.</div><div>Repudiandae repellendus odit similique labore.</div><div>Quasi temporibus ex maiores dolores!</div></div></body></html>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了全局设置滚动条样式。

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。