css修改滚动条默认样式,css滚动条样式分享


 

  页面HTML:

  

1 <div class="inner"> 2     <div class="innerbox"> 3         <p style="height:200px;">这是内容111</p> 4         <p style="height:400px;">这里是内容222</p> 5         <p>这里是内容333</p> 6     </div> 7 </div>

 

  css代码:

  

 1 .inner{  2             width: 265px;  3             height: 400px;  4             position: absolute;  5             top: 33px;  6             left: 13px;  7             /*cursor: pointer;*/  8             overflow:hidden;  9         } 10         .innerbox{ 11             overflow-x: hidden; 12             overflow-y: auto; 13             color: #000; 14             font-size: .7rem; 15             font-family: "5FAE8F6F96C59ED1",Helvetica,"黑体",Arial,Tahoma; 16             height: 100%; 17         } 18         /*滚动条样式*/ 19         .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ 20             width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/ 21             height: 4px; 22         } 23         .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ 24             border-radius: 5px; 25             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 26             background: rgba(0,0,0,0.2); 27         } 28         .innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/ 29             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 30             border-radius: 0; 31             background: rgba(0,0,0,0.1); 32         }

 

www.dengb.comtruehttps://www.dengb.com/HTML_CSS/1307951.htmlTechArticlecss修改滚动条默认样式,css滚动条样式 页面HTML: 1 div class =”inner” 2 div class =”innerbox” 3 p style =”height:200px;” 这是内容111 / p 4 p style =”height:400…

—-想了解更多的css相关样式处理怎么解决关注<计算机技术网(www.ctvol.com)!!>

本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址:https://www.ctvol.com/csstutorial/109154.html

(0)
上一篇 2020年5月4日
下一篇 2020年5月4日

精彩推荐