欢迎关注我的公众号：前端大侦探众所周知，Windows和macOS的滚动条默认是不一致的。最显着的区别是macOS的滚动条不占屏幕大小，如下，而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下面是windows下的滚动条有了这两个伪元素，自定义样式就很方便了。现在我们需要移除滚动条的背景，并将滑块更改为半透明的圆角矩形::-webkit-scrollbar{background-color:transparent;}::-webkit-scrollbar-thumb{background-color:transparent;border-radius:8px;}效果如下，是不是和macOS有点不一样？没关系，我们继续优化2、滑块和滚动容器的距离。macOS的滚动滑块不靠近边缘，它和滚动容器之间有间隙。那么，如何留一点空隙呢？尝试了一些方法，例如向滚动容器添加填充，或向滑块添加边距::-webkit-scrollbar{padding:02px;}::-webkit-scrollbar-thumb{margin:02px;}因为这些都不是由于滚动条的特殊性，方式起作用。后来发现border是有效的。例如，添加一个border::-webkit-scrollbar-thumb{border:2pxsolidred;}到滑块。因为是透明的，背景默认会覆盖边框，所以还需要设置背景效果区域(background-clip)::-webkit-scrollbar-thumb{border:2pxsolidtransparent;background-clip:content-box;}效果如下三、悬浮滚动条在内容上方还有一个重要的特性没有实现，就是滚动条的位置。macOS的滚动类似于悬停在内容上，不占用任何页面空间。那么，Windows能做到吗？当然也可以，而且很容易。你只需要一个属性body{overflow:overlay;/*滚动条会覆盖页面*/}看看下面的对比效果，是不是很像MacOS？4.macOS的滚动条还有一个特点，滚动时才会出现。它默认是不可见的。它仅在滚动时可见。一旦停止，它就会消失。如下用css判断是否滚动是不行的。有了js的强大，原理就很简单了。滚动的时候，给body添加一个属性scroll属性，延时500ms后移除。如果继续滚动，请取消计时器。代码如下document.body.toggleAttribute('scroll')},500)})然后用一点CSS::-webkit-scrollbar-thumb{/*otherstyles*/background-color:transparent;}body[scroll]::-webkit-scrollbar-thumbbackground-color:rgba(0,0,0,.5);}现在来看看效果是不是很接近macOS的效果？不过还是有一点遗憾，滚动条上不支持transition和animation，如下::-webkit-scrollbar-thumb{transition:.3s;/*doesn'twork*/}即实现了macOS下的“淡出”效果，单靠CSS是无法实现的。当然这个问题不大，可以忽略（可以通过继承背景色来实现，可以参考https://stackoverflow.com/que...）body{background-color:transparent;过渡：.3s背景色；}::-webkit-scrollbar-thumb{背景颜色：继承；/*继承滚动容器的背景色*/}body[scroll]{background-color:rgba(0,0,0,.5);transition:0s;}这是完整的代码：body{margin:0;溢出：覆盖；背景颜色：透明；过渡：.3s背景色；}::-webkit-scrollbar{背景色：透明；width:12px;}::-webkit-scrollbar-thumb{background-color:inherit;边界半径：8px；背景剪辑：内容框；border:2pxsolidtransparent;}body[scroll],::-webkit-scrollbar-thumb:hover{transition:0s;-颜色：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)})也可以访问在线演示：macOSscrollbar(runjs.work)RunJS,前端代码创建和在线分享5.总结与解释以上就是自定义滚动的小技巧，你学会了吗？让我们总结一下Windows和macOS的默认滚动条。很多设计师觉得Windows不是很漂亮。需要自定义滚动条主要借助两个关键的伪元素::-webkit-scrollbar和::-webkit-scrollbar-thumbscrollslider和滚动容器之间的间隙可以通过border和backgrpound来实现-夹子。为滚动容器设置overflow:overlay，使滚动条悬浮在内容上方。滚动的时候需要用到js定时器。另外，有同学问firefox怎么办？没关系，不用担心，桌面端已经被Chrome霸占，占比超过70%。还有一点，这是对视觉体验的优化。即使firefox不支持，也不影响滚动条功能。有什么理由不使用它吗？？最后，如果觉得对你有好处和帮助，欢迎点赞、收藏、转发???欢迎关注我的公众号：前端大侦探
