如何用css改变滚动条样式?

.main::-webkit-scrollbar { /*滚动条整体样式*/

    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/

    height: 6px;

  }

.main::-webkit-scrollbar-thumb {  /*滚动条里面小方块*/

    height: 50px;

    background-color: #999;

    -webkit-border-radius: 4px;

    outline: 2px solid #ededed;

    outline-offset: -2px;

  }

.main::-webkit-scrollbar-track {  /*滚动条里面轨道*/

    background-color: #ededed; /*滚动条的背景颜色*/

    -webkit-border-radius: 0; /*滚动条的圆角宽度*/

  }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,199评论 0 11
  • 我的公共CSS文件@import "normalize.css";/begin主页面//begin主页面/body...
    蓝色海洋_1982阅读 1,198评论 0 0
  • CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器) /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸...
    紫枫_e415阅读 1,441评论 0 0
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,688评论 0 8
  • 这篇文字里我会介绍50 个便于使用的 CSS2/CSS3 代码片段给所有的WEB专业人员. 选择IDE开发环境来存...
    JamHsiao_aaa4阅读 1,277评论 0 3