More than code
Welcome to the website

CSS3自定义滚动条样式

CSS3对于滚动条也做了特别支持,可惜目前只有webkit内核的支持比较好,IE支持不完全,详细兼容性请查看http://caniuse.com/#search=scrollbar

主要有7个属性:

  1. ::-webkit-scrollbar? 滚动条整体部分,可以设置宽度啥的
  2. ::-webkit-scrollbar-button? 滚动条两端的按钮
  3. ::-webkit-scrollbar-track? ?外层轨道
  4. ::-webkit-scrollbar-track-piece? ?内层滚动槽
  5. ::-webkit-scrollbar-thumb? 滚动的滑块
  6. ::-webkit-scrollbar-corner? 边角
  7. ::-webkit-resizer? 定义右下角拖动块的样式

具体所指如图示:

示例:

/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #f5f5f5;
 }
 /*定义滚动条的轨道,内阴影及圆角*/
 ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(45, 62, 80, .3);
    border-radius: 10px;
    background-color: #f5f5f5;
 }
 /*定义滑块,内阴影及圆角*/
 ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(45, 62, 80, .3);
    background: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#2D3E50), to(#2D3E50), color-stop(.6, #129FEA));;
 }
 /*滑块鼠标悬停样式*/
 ::-webkit-scrollbar-thumb:hover {
    background: #129FEA;
 }
赞(0) 打赏
未经允许不得转载:李帅帅空间 » CSS3自定义滚动条样式

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    [/给力]

    ice__point1年前 (2017-05-20)回复
  2. #2

    [/给力]

    ice_point1年前 (2017-05-20)回复
  3. #3

    pinglun

    ice_point1年前 (2017-05-20)回复
  4. #4

    [/强]

    憶昔年1年前 (2017-06-22)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏