css修改滚动条默认样式
1.css
.inner { width: 100%; height: 200px; /*overflow: scroll;*/ } .innerbox { /*overflow-x: hidden; overflow-y: auto;*/ overflow: scroll; color: #0073B3; height: 100%; } .innerbox p { white-space: nowrap; } /*滚动条样式*/ /*滚动条整体样式*/ .innerbox::-webkit-scrollbar { width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 10px; } /*定义滚动条轨道 内阴影+圆角*/ .innerbox::-webkit-scrollbar-thumb { border-radius: 4px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: red; } /*定义滚动条轨道 内阴影+圆角*/ .innerbox::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background: yellow; } /*滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/ .innerbox::-webkit-scrollbar-button { background: blue; /*display: none;*/ } /*边角*/ .innerbox::-webkit-scrollbar-corner { background: greenyellow; } /*定义右下角拖动块的样式*/ .innerbox::-webkit-scrollbar-resizer { background: grey; } /*内层轨道，滚动条中间部分（除去）。*/ .innerbox::-webkit-scrollbar-track-piece { /*background: url(img/5.png);*/ } .uicss { height: 300px; overflow-y: scroll; scrollbar-face-color: #EAEAEA; scrollbar-shadow-color: #EAEAEA; scrollbar-highlight-color: #EAEAEA; scrollbar-3dlight-color: #EAEAEA; scrollbar-darkshadow-color: #697074; scrollbar-track-color: #F7F7F7; scrollbar-arrow-color: #666666; } 2.html <div class="inner"> <div class="innerbox"> <p style="height:200px;">这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111</p> <p style="height:400px;">这里是内容222</p> <p>这里是内容333</p> </div> <div class="uicss"> <p style="height:200px;">这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111这是很长的内容111</p> <p style="height:400px;">这里是内容222</p> <p>这里是内容333</p> </div> </div> 3.效果