css实现Mac端滚动条

1. 初衷

做了几年的前端了，做笔记都是在自己的网盘里面记录，每次翻原来的笔记，总感觉差了点什么，突然有一天，一声惊雷闪过，文字依旧是那点文字，读者只有唯一，为什么不能分享出来，分享踩过的坑，希望能帮助到正在看的你。

2.为什么要自定义滚动条？

一直觉得，滚动条用默认的就好了，没特殊需求为啥要自定义呢？之前做过一个自定义表格，功能有：超出一定的高度滚动起来，表头固定，没列有自定义右键菜单，如下：

windows端自定义表格
最近入手一台Mac，再看原来的代码，Mac竟然如此神奇，滚动条不占位置，还会显示隐藏，而我自定义的表格在Mac端出问题，因为表格自定义，使用的ul、li模拟的表格，滚动条在windows端占位，到Mac端不占位了，故出现表头和内容不对齐情况，如下：
Mac端自定义表格
图中是有滚动条的，因Mac默认隐藏，故滚动条的17px导致错行。

3. 实现Mac端滚动条兼容

要做到同时兼容windows和Mac，那么可以自定义滚动条，做法很简单，在全局的css样式中加入下面代码即可：

//自动移滚动条样式
::-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);
}

1、::-webkit-scrollbar 定义了滚动条整体的样式；
2、::-webkit-scrollbar-thumb 滑块部分；
3、::-webkit-scrollbar-thumb 轨道部分；

加上这个代码，在看下效果，自定义表格完美兼容Mac。

自定义滚动条有很多方式，这里只是展示了个人觉得比较简单的，还有很多插件可以实现，有兴趣的朋友可以自己玩一下。