#浏览器滚动条美化

1html {
2	// 兼容IE浏览器（可以省略）
3	-ms-overflow-style: none;
4	// 兼容Firefox浏览器（可以省略）
5	overflow: -moz-scrollbars-none;
6	// 主要代码
7	overflow: hidden;
8	overflow-y: scroll;
9	scrollbar-width: none;
10}
11// 去除Chrome浏览器右侧滚动条区域的宽度
12html::-webkit-scrollbar {
13	width: 0 !important;
14}

1.header {
2	width: 100%;
3	position: fixed;
4	z-index: 1;
5}

1/* 处理 Firefox 浏览器滚动条样式 */
2* {
3	scrollbar-width: thin;
4	scrollbar-color: #b2b2b2 transparent;
5	/* overflow-scroll: touch; */
6	webkit-overflow-scrolling: touch;
7}
8/* 处理 chrome、edge 等浏览器滚动条 */
9::-webkit-scrollbar {
10	width: 4px;
11	height: 5px;
12}
13
14::-webkit-scrollbar-thumb {
15	background-color: rgba(0, 0, 0, 0.3);
16	border-radius: 5px;
17}
18
19::-webkit-scrollbar-thumb:hover {
20	background-color: rgba(0, 0, 0, 0.5);
21}
22
23::-webkit-scrollbar-track:hover {
24	border-radius: 5px;
25}

1.content {
2	width: 100%;
3	height: calc(100vh - {header高度 + footer高度}px);
4}