需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：<div style="overflow: scroll">hello world!</div>。
3、浏览器运行index.html页面，此时成功在html中指定的div中添加了滚动条。
<div class="test test-1"><div class="scrollbar"></div>
</div>
Css
.test{
width: 50px
height: 200px
overflow: auto
float: left
margin: 5px
border: none
}
.scrollbar{
width: 30px
height: 300px
margin: 0 auto
}
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px/*高宽分别对应横竖滚动条的尺寸*/
height: 1px
}
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2)
background: #535353
}
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2)
border-radius: 10px
background: #EDEDED
}
1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）.
overflow-x水平方向内容溢出时的设置.
overflow-y垂直方向内容溢出时的设置.
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）.
scrollbar-arrow-color上下按钮上三角箭头的颜色.
scrollbar-base-color滚动条的基本颜色.
scrollbar-dark-shadow-color立体滚动条强阴影的颜色.
scrollbar-face-color立体滚动条凸出部分的颜色.
scrollbar-highlight-color滚动条空白部分的颜色.
scrollbar-shadow-color立体滚动条阴影的颜色.
