欢送关注我的公众号：前端侦探

家喻户晓，Windows和macOS的滚动条在默认状况是不统一的，最显著的区别就是 macOS滚动条是不占据屏幕尺寸的，如下

而Windows下是这样的

很多设计师会吐槽Windows滚动条不太好看，能不能自定义成macOS那样呢？

当然也是能够的！一起看看吧

一、自定义滚动条外观

思考到桌面端当初曾经是-webkit-的天下了，以下自定义均以chrome为例

自定义滚动条须要用到两个要害的伪元素::-webkit-scrollbar和::-webkit-scrollbar-thumb

  1. ::-webkit-scrollbar滚动容器款式
  2. ::-webkit-scrollbar-thumb滑块款式
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

上面是windows下的滚动条

有了这两个伪元素，自定义款式就很不便了。当初咱们须要将滚动条的背景去除，滑块批改成半透明的圆角矩形

::-webkit-scrollbar{  background-color: transparent;}::-webkit-scrollbar-thumb{  background-color: transparent;  border-radius: 8px;}

成果如下

是不是和macOS的差别有点大？没关系，上面持续优化

二、滑块与滚动容器之间的间距

macOS的滚动滑块并不是紧贴边缘的，它与滚动容器间接还有间隙

那么，如何留出一点点间隙呢？

尝试了一些办法，比方给滚动容器增加内边距，或者给滑块增加外边距

::-webkit-scrollbar{  padding: 0 2px;}::-webkit-scrollbar-thumb{  margin: 0 2px;}

因为滚动条的特殊性，这些形式都不起作用。

起初发现，边框是失效的，比方给滑块增加一个border

::-webkit-scrollbar-thumb{  border: 2px solid red;}

成果如下

既然这样就好办了，把边框设置成通明不就行了吗，因为是通明，默认状况下背景会笼罩到边框，所以还须要设置背景作用区域（background-clip）

::-webkit-scrollbar-thumb{  border: 2px solid transparent;  background-clip: content-box;}

成果如下

三、将滚动条悬浮在内容之上

还有一个比拟重要的个性没有实现，那就是滚动条的地位。macOS的滚动相似于悬浮在内容之上，不占据任何页面空间，那么，Windows能够做到吗？当然也是能够的，而且非常容易，只须要一个属性

body{  overflow: overlay; /*滚动条会笼罩在页面之上*/}

上面看比照成果

是不是看着十分像MacOS了？

四、滚动时才呈现

macOS滚动条还有一个个性，就默认状况下是不可见的，只有滚动时才可见，一旦进行就又隐没了，如下

是否正在滚动就没法用CSS进行判断了，须要借助点js的力量，原理很简略，滚动的时候给body增加一个属性scroll属性，而后提早500ms后移除，如果持续滚动就勾销计时器，代码如下

window.addEventListener('scroll', function() {  document.body.toggleAttribute('scroll', true)  this.timer && clearTimeout(this.timer)  this.timer = setTimeout(() => {    document.body.toggleAttribute('scroll')  }, 500)})

而后配合一点CSS

::-webkit-scrollbar-thumb{  /*其余款式*/  background-color: transparent;}
body[scroll]::-webkit-scrollbar-thumb  background-color: rgba(0,0,0,.5);}

当初再看看成果

是不是十分靠近macOS的成果了？

不过还有个小遗憾，滚动条上不反对过渡和动画，如下

::-webkit-scrollbar-thumb{  transition: .3s;/*并不失效*/}

也就是想达到macOS下那种“淡出”的成果，仅凭 CSS是做不到的，当然这也并不是大问题，能够疏忽

上面是残缺代码：

body{  margin: 0;  overflow: overlay;}::-webkit-scrollbar{  background-color: transparent;  width: 12px;}::-webkit-scrollbar-thumb{  background-color: transparent;  border-radius: 8px;  background-clip: content-box;  border: 2px solid transparent;}body[scroll]::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{  background-color: rgba(0,0,0,.5);}
window.addEventListener('scroll', function(ev) {  document.body.toggleAttribute('scroll', true)  this.timer && clearTimeout(this.timer)  this.timer = setTimeout(() => {    document.body.toggleAttribute('scroll')  }, 500)})

你也能够拜访在线 demo：macOS scrollbar (codepen.io)或者 macOS scrollbar(juejin.cn) 或者macOS scrollbar (gitee.io)

五、总结和阐明

以上就是自定义滚动全副小技巧了，你学会了吗？上面总结一下

  1. Windows和macOS默认滚动条不统一，很多设计师感觉Windows不太好看，有必要自定义
  2. 自定义滚动条次要借助两个要害的伪元素::-webkit-scrollbar和::-webkit-scrollbar-thumb
  3. 滚动滑块和滚动容器之间的间隙能够通过border和backgrpound-clip实现
  4. 给滚动容器设置overflow: overlay，能够将滚动条悬浮于内容之上
  5. 滚动时呈现须要借助js定时器

另外，有同学问firefox怎么办呢？没关系，不必管它，桌面端早已是Chrome的天下了，占比超过70%，还有一点，这是个视觉体验的优化，即便firefox不反对也不影响滚动条性能，有什么理由不去应用呢？最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探