- 第一步:滚动区域新增一层父容器(示例中为类名为cont的父容器)
.cont {
width: 1480px;
height: 670px;
overflow-y: scroll;
overflow-x: hidden;
}
- 第二步:根据需求,设置滚动条的背景颜色(滚动条本身滚动的区域的底色)
::-webkit-scrollbar {
width: 12px;
height: 200px;
background-color: #132A4B;
display: block;
}
- 第三步:根据需求,设置滚动条的颜色样式
.cont::-webkit-scrollbar-thumb {
background: #0B5BBE;
border-radius: 6px;
}
好啦,滚动条就做好啦!(欢迎评论指正)