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);
}