【我的前端】CSS在Windows下实现Mac浏览器滚动条

Windows实现Mac浏览器滚动条

💖💖💖💕💕💕欢迎来到本博客💕💕💕💖💖💖
.
🎁支持：如果觉得博主的文章写得还说得过去或者博客对您有帮助的话，可以关注一下博主，如果三连收藏支持就更好啦！这就是给予我最大的支持！

🎉🎉Welcome to my blog!🎉🎉

📃个人优快云博客主页：热爱科技的刘同学🌈🌈🌈

众所周知，Windows 和 macOS 浏览器的滚动条在默认情况下是不一致的，最为显著的是 macOS 的滚动条是不占据屏幕尺寸的，macOS 的滚动条如下：

而 Windows 是这样的：

有很多设计师会吐槽 Windows 滚动条不太美观，能不能自定义成 macOS 那样呢？当然也是可以的，一起来看看吧！

一、自定义滚动条外观

考虑到桌面端现在已经是 -webkit- 的天下了，自定义均已 chrome 为例。

自定义滚动条需要用到两个关键的为元素 ::-webkit-scrollbar 和 ::-webkit-scrollbar-thumb：

1. ::-webkit-scrollbar滚动容器样式
2. ::-webkit-scrollbar-thumb滑块样式

下面是 Windows 下面的滚动条：

有了这两个伪元素，自定义就很方便了。现在我们需要将滚动条的背景去除，滑块修改成半透明的圆角矩形。

::-webkit-scrollbar{
   
   
    background-color: transparent;
}

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

效果图如下：

是不是和 macOS 的差异有点儿大？没关系，下面我们继续优化。

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

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

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

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

::-webkit-scrollbar{