首先写一个div,设置宽高,overflow-x;overflow-y:auto,如图:

<div class="s_box"> <p>滚动条测试1</p> <p>滚动条测试2</p> <p>滚动条测试3</p> <p>滚动条测4试</p> <p>滚动条测试5</p> <p>滚动条测试6</p> <p>滚动条测试7</p> <p>滚动条测试8</p> <p>滚动条测试9</p> <p>滚动条测试10</p> <p>滚动条测试11</p> <p>滚动条测试12</p> <p>滚动条测试13</p> <p>滚动条测试14</p> <p>滚动条测试15</p> <p>滚动条测试16</p> <p>滚动条测试17</p> <p>滚动条测试18</p> </div>
然后通过css改变默认滚动条的样式
.s_box{ width:130px; height:200px; background:#FC9; margin:0 auto; overflow-x:hidden; overflow-y:auto; scrollbar-face-color: #8e8e8e; scrollbar-arrow-color: #efefef; scrollbar-3dlight-color: #b8b19c; scrollbar-highlight-color: #b1b1b1; scrollbar-shadow-color: #898989; scrollbar-darkshadow-color: #898989; scrollbar-track-color: #ffffff; scrollbar-base-color: #b8b19c; }
scrollbar-face-color: #f00;改变滚动条本身,如图:

scrollbar-arrow-color: #f00;改变小三角的颜色,如图:

scrollbar-3dlight-color: #f00;改变左侧外边线的颜色,如图:

scrollbar-highlight-color: #f00;改变左侧内边线的颜色,如图:

scrollbar-shadow-color: #f00;改变右侧内边线的颜色,如图:

scrollbar-darkshadow-color: #f00;改变右侧外边线的颜色,如图:

scrollbar-track-color: #f00;改变滚动条剩余部分的颜色,如图:

scrollbar-base-color: #b8b19c;