<!DOCTYPE HTML> <html> <head> <title>改变滚动条的颜色</title> <style> .inner{ width: 265px; height: 400px; position: absolute; top: 33px; left: 13px; /*cursor: pointer;*/ overflow:hidden; } .innerbox{ overflow-x: hidden; overflow-y: auto; color: #000; font-size: .7rem; height: 100%; } /*核心代码*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); } .innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0; background: rgba(0,0,0,0.1); } /*核心代码*/ </style> </head> <body> <div class="inner"> <div class="innerbox"> <p style="height:200px;">111</p> <p style="height:600px;">222</p> <p>333</p> </div> </div> </body> </html> <div style="width: 375px;height: 100%;"> <style> /*核心代码*/ .warp::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .warp::-webkit-scrollbar-thumb {/*滚动条里面小方块 0.5是滚筒条透明度*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5); background: rgba(0,0,0,0); } .warp::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5); border-radius: 0; background: rgba(0,0,0,0); } /*核心代码*/ .warp { font-size: 0; white-space: nowrap; overflow: scroll; } .item { background: red; display: inline-block; font-size: 14px; width: 25%; height: 50px; text-align: center; line-height: 50px; color: #fff; } </style> <div class="warp"> <!-- 横向滚动 --> <div class="item">111</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> </div> </div>
