关于前端:Windows滚动条如何美化成-macOS-那样

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

家喻户晓，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 不反对也不影响滚动条性能，有什么理由不去应用呢？最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

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