div 设置滚动条大小（粗细）

最新推荐文章于 2024-08-14 10:47:25 发布

让生命变得有价值

最新推荐文章于 2024-08-14 10:47:25 发布

阅读量5.4k

点赞数 3

文章标签： css vue.js

本文链接：https://blog.csdn.net/weixin_44252186/article/details/122828026

版权

本文介绍了如何通过CSS实现滚动条样式的定制，包括宽度和颜色的设置，同时展示了如何配置使得当内容超出容器高度时，垂直滚动条自动出现。示例代码详细展示了::-webkit-scrollbar系列伪元素的用法。

摘要由CSDN通过智能技术生成

 <div class="nav" style="overflow:auto; overflow-x:hidden; ">
  
 </div>

上面我设置隐藏水平滚动条，当内容超过高度时垂直滚动条会自动显示出来。

下面是滚动条的样式，可以设置宽度和颜色。

<style scoped lang="scss">
::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background-color: #f3f3f3;
}

::-webkit-scrollbar-thumb {
  background-color: #aaa;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

::-webkit-scrollbar-thumb:active {
  background-color: #aaa;
}
</style>

如果对你有帮助，谢谢你点个赞！