<!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>
效果图
