overflow:scroll滚动条样式修改

第一,在需要加滚动条的元素上加上overflow: scroll,并设置高度!

如:

<div><p class="AddStyle">213131321231312331312313131231212313123123123131231231</p></div>

我需要给p标签加入滚动条!代码如下!

.AddStyle{overflow: scroll;height: 600px;}

第二,现在p标签如果超出高度为600px的时候就有滚动条显示了!接下来修改样式!

.AddStyle::-webkit-scrollbar{/*滚动条整体样式*/width: 8px;/*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}.AddStyle::-webkit-scrollbar-thumb{/*滚动条里面小方块*/border-radius: 10px; background: #9e9e9e; box-shadow: inset 0 0 5px rgba(0, 122, 204);}//滚动条底层颜色!.AddStyle::-webkit-scrollbar-track{border-radius: 10px; background: #ededed;/*滚动条里面轨道*/box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);}