CSS 滚动条样式

1. 概述

1.1 说明

有时候为了美观会对默认的滚动条样式通过css去进行美化

1.2 滚动条内容

1.2.1  滚动条外观查看

    1.可滑动的内容(中间的实体内容),即滑块。

    2.滚动条边框(轨道),滑块在此里边进行滑动,即轨道

1.2.1  滚动条样式

    • ::-webkit-scrollbar    定义了滚动条整体的样式
    • ::-webkit-scrollbar-thumb        滑块部分(滚动条里边的小方块,能向上/下或向左/右移动)
    • ::-webkit-scrollbar-track         轨道部分(里边装有thumb)

 2. 代码

  滚动条兼容Windows和mac

//定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
//定义滑块 内阴影+圆角
::-webkit-scrollbar-thumb{
  border-radius: 1em;
  background-color: rgba(50,50,50,.3);
}
//定义滚动条轨道 内阴影+圆角
::-webkit-scrollbar-track{
  border-radius: 1em;
  background-color: rgba(50,50,50,.1);
}

 

posted @ 2019-09-19 10:37  ajuan  阅读(1864)  评论(0编辑  收藏  举报