修改滚动条样式， 并使滚动条不贴边

// 修改滚动条样式
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0);
}

::-webkit-scrollbar-thumb {
  border-top-left-radius: 6px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 7px;
  border-right: 2px solid rgba(0, 0, 0, 0);
  box-shadow: 12px 12px 0 #b6b9bb inset;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb:hover {
  box-shadow: 12px 12px 0 #76797d inset;
}

好吧，还好可以修改滚动条的样式（还好网站只针对谷歌浏览器），结果发现修改了滚动条的样式之后滚动条紧贴着body。

客户表示不满意并说 mac的滚动条是有间隙的。好吧我再试试，结果发现在滚动条的伪类中比如padding，margin之类的并不生效。为了节省时间直接去网上搜了一圈发现都是讲怎么修改样式的，并没有使滚动条“有间隙”的解决办法（或许是我没找到）。好吧好吧，看来只能自己想办法，通过自己实验发现border和box-shadow属性是可以生效的，进而找到了解决办法：

1、设置滚动条border为透明2、使用box-shadow填充背景颜色。

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有thumb）
::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，及两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件