【刘同学的前端】Windows实现Mac浏览器滚动条

Windows实现Mac浏览器滚动条

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

🎉🎉Welcome to my blog!🎉🎉

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

众所周知，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;
}

1
2
3
4
5
6
7
8
9

效果图如下：

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8

由于滚动条的特殊性，这些方式都是不起作用的。

后来发现，边框是生效的，比如给滑块添加一个 border

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

1
2
3
4

效果如下：

既然这样就好办了，把边框设置成透明不就行了吗，由于是透明，默认情况下北京会覆盖到边框，所以还需要背景作用域 (backgroud-clip)

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

1
2
3
4
5

效果如下：

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

还有一个比较重要的特性没有实现，那就是滚动条的位置。macOS 的滚动类似于悬浮在内容之上，不占据任何页面空间，那么，Windows 可以做到吗？不仅可以，而且十分容易，只需要一个属性。

body{
    overflow: overplay; /* 滚动条会覆盖在页面之上 */
}

1
2
3
4

效果如下：

四、滚动时才出现

macOS 还有一个特性，就是默认情况下不可见，只有滚动时才可见，一旦停止就又消失了。

是否在滚动就不再是 css 能判断的了，需要借助点儿 js 的力量，原理很简单，滚动的时候给 body 添加一个 scroll 属性，然后延迟 500ms 后移除，如果滚动就取消计时器代码如下：

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

1
2
3
4
5
6
7
8

配合一点儿 css。

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

body[scroll]::-webkit-scrollbar-thumb{
    background-color: rgba;
}

1
2
3
4
5
6
7
8

虽然做出来后已经非常接近 macOS的效果了，但是还有点儿小遗憾，那就是滚动条上不支持过度和动画。

也就是说 macOS 下那种可以"淡出"的效果，仅凭 css 是做不到的，当然这也并不是大问题，可以直接忽略。
(这种效果是可以通过继承背景色实现，如果有参考文献可以在评论区里分享)

五、完整代码

css代码：

body{
    margin: 0;
    overflow: overplay;
    background-color: transparent;
    transition: .3s background-color;
}

::-webkit-scrollbar{
    background-color: transparent;
    width: 12px;
}

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

body[scroll],
::-webkit-scrollbar-thumb:hover{
    transition: 0s;
    background-color: rgba;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

js代码：

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

1
2
3
4
5
6
7
8

六、总结说明

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

1.Windows 和 macOS 的滚动条不一致，很多设计师觉得 Windows 不太美观，有必要自定义；
2. 自定义滚动条需要用到两个关键的为元素 ::-webkit-scrollbar 和 ::-webkit-scrollbar-thumb；
3. 滚动滑块与滚动容器之间的间隙可以通过 border 和 background-clip 来实现；
4. 给滚动容器设置 overflow: overplay，可以是滚动条悬浮于内容之上；
5. 滚动时出现需要借助 js 定时器。

另外，有同学问 firefox 怎么办呢？没关系，不用管它，桌面端早就是 chrome 的天下了，占比超过 70%。还有一点，这是个视觉体验的优化，即使 firefox 不支持也不影响滚动条的功能，有什么理由不去使用呢？

最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发💖💖💖。