滚动条
Posted baixiaoxiao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动条相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于滚动条的主要内容，如果未能解决你的问题，请参考以下文章