欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css优化滚动条样式

程序员文章站 2022-07-03 20:53:18
...

刚给div加了滚动条,发现默认的样式很难看,所以想美化一下,搜了一下找到一个还不错,就记录下来
content是div的class名,也可以不加,就是全局样式

 .content::-webkit-scrollbar{//滚动条整体样式
    width: 10px;
    height: 10px;
  }
  .content::-webkit-scrollbar-thumb{//滚动条小方块样式
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #B5BECB;
  }
  .content::-webkit-scrollbar-track{//滚动条滚动轴样式
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #EDEDED;
  }

效果图:
css优化滚动条样式
如果要隐藏横向滚动条,可以加入这段代码

.content {
    height: 500px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
   /*overflow:scroll;*/
    overflow-x: hidden;
    overflow-y: auto;
  }