众所周知，Windows和macOS的滚动条默认是不一致的。最显着的区别是macOS的滚动条不占屏幕大小，如下：macOS滚动条和Windows：windows上有很多滚动条设计师会抱怨Windows的滚动条不是很漂亮，能不能像macOS一样定制？当然也是可以的！一起来看看吧！1.自定义滚动条的外观考虑到现在桌面都是-webkit-，下面的自定义都是以chrome为例：自定义滚动条需要两个关键的伪元素：:-webkit-scrollbar和::-webkit-scrollbar-thumb。::-webkit-scrollbar滚动容器样式::-webkit-scrollbar-thumb滑块样式https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar[1]。下面是windows下的滚动条：scrollbarrelatedpseudoelements有了这两个伪元素，自定义样式就很方便了。现在我们需要去掉滚动条的背景，修改滑块为半透明的圆角矩形。::-webkit-scrollbar{背景颜色：透明；}::-webkit-scrollbar-thumb{背景颜色：透明；border-radius:8px;}效果如下：自定义滚动条和macOS有区别吗？大的？没关系，我们继续优化：2.slider和滚动容器的距离。macOS的滚动滑块不靠近边缘，它和滚动容器之间有间隙。macOS滚动条中的间隙那么，如何留下一点间隙呢？尝试了一些方法，例如向滚动容器添加填充，或向滑块添加填充。::-webkit-scrollbar{padding:2px;}::-webkit-scrollbar-thumb{margin:2px;}由于滚动条的特殊性，这些方法都不起作用。后来发现border是有效的，比如给slider加border。::-webkit-scrollbar-thumb{border:2pxsolidred;}效果如下：加边框的效果好办既然是这样，那边框设置成透明行不行，因为是透明的，背景会默认覆盖到边框，所以还需要设置背景区域（background-clip）。::-webkit-scrollbar-thumb{border:2pxsolidtransparent;background-clip:content-box;}效果如下：透明边框加上background-clip的效果3.还有一个很重要的就是将滚动条悬浮在content上面没有实现的特性是滚动条。macOS的滚动类似于悬停在内容上，不占用任何页面空间。那么，Windows能做到吗？当然也可以，而且很容易，只需要一个属性即可。正文{溢出：覆盖；/*滚动条会覆盖页面*/}看下面的对比效果：叠加效果的对比是不是很像MacOS？4.macOS的滚动条还有一个特点，滚动时才会出现。它默认是不可见的。它仅在滚动时可见。一旦停止，它又会消失。做出判断，需要借助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{/*otherstyles*/background-color:transparent;}body[scroll]::-webkit-scrollbar-thumbbackground-color:rgba(0,0,0,.5);}现在看效果：windows下的滚动效果是不是很接近macOS的效果？不过还是有一点遗憾，滚动条上不支持transition和animation，如下：::-webkit-scrollbar-thumb{transition:.3s;/*doesn'twork*/}也就是说，想实现那种“在macOS下”“淡出”的效果，单靠CSS是无法实现的。当然，这不是什么大问题。您可以忽略下面的完整代码：body{margin:0;溢出：覆盖；}::-webkit-scrollbar{背景色：透明；宽度：12px；}::-webkit-scrollbar-thumb{背景色：透明；边框r-半径：8px；背景剪辑：内容框；border:2pxsolidtransparent;}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)})也可以访问在线演示：macOS滚动条（codepen.io）[2]或macOS滚动条（juejin.cn）[3]或macOS滚动条（gitee.io）[4]5.总结与解释以上就是自定义滚动的小技巧，你学会了吗？总结一下：Windows和macOS默认的滚动条不一致。很多设计师觉得Windows不是很漂亮，需要定制。自定义滚动条主要依赖两个关键的伪元素::-webkit-scrollbar和::-webkit-scrollbar-thumb。scrollslider和scrollcontainer之间的间隙可以通过border和backgrpound-clip来实现。为滚动容器设置overflow:overlay，使滚动条悬浮在内容上方。滚动的时候需要用js定时器来延时控制状态。另外，有同学问fierfox怎么办？没关系，不用担心，桌面已经是Chrome独霸了，占比超过70%，还有一点，这是对视觉体验的优化，即使firefox不支持它，它不会影响滚动条功能，为什么不去那里使用呢？
