前端页面自定义滚动条

225 阅读 0 评论 149 点赞

我是靠谱客的博主合适狗，这篇文章主要介绍前端页面自定义滚动条，现在分享给大家，希望可以做个参考。

示例

代码

<div class="p-detail__table-scrollbar">
<div style="width: 3300px;height: 10px;">
</div>
</div>
<style>
.p-detail__table-scrollbar{
overflow-x: scroll;
overflow-y: hidden;
}
.p-detail__table-scrollbar::-webkit-scrollbar{
width:1px;
height: 10px;
background-color: #ccc;
border-radius: 5px;
}
.p-detail__table-scrollbar::-webkit-scrollbar-track{
border-radius: 5px;
}
.p-detail__table-scrollbar::-webkit-scrollbar-thumb{
border-radius: 5px;
background-color: #333;
}
</style>

转载于:https://www.cnblogs.com/apeandcat/p/11373299.html