网页、h5默认滚动条样式重构

---

---

前言

此文章用于，让我自己快速设置 浏览器、h5 默认滚动条样式……

---

一、使用步骤

1、在想要滚动的元素上设置相应的css类名

代码如下：

<div class="list scroll-container"><p>…………</p><p>…………</p>…………
</div>

2.设置样式

代码如下：

/* 容器样式 */
.list{height: 500px; /* 记住一定要设置高度哦！*/
}/* 滚动条样式 */
.scroll-container {  overflow: hidden;  overflow-y: auto;  
}  
.scroll-container::-webkit-scrollbar-track-piece {  background-color: rgba(0, 0, 0, 0);  border-left: 1px solid rgba(0, 0, 0, 0);  
}  
.scroll-container::-webkit-scrollbar {  width: 5px;  height: 13px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  
}  
.scroll-container::-webkit-scrollbar-thumb {  background-color: rgba(0, 0, 0, 0.2);  background-clip: padding-box;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  min-height: 28px;  
}  
.scroll-container::-webkit-scrollbar-thumb:hover {  background-color: rgba(0, 0, 0, 0.2);  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  
} 

该处使用的url网络请求的数据。

---

总结

以上就是今天的内容，三Q！