Windows实现Mac浏览器滚动条
众所周知,Windows
和 macOS
浏览器的滚动条在默认情况下是不一致的,最为显著的是 macOS
的滚动条是不占据屏幕尺寸的,macOS
的滚动条如下:
而 Windows
是这样的:
有很多设计师会吐槽 Windows
滚动条不太美观,能不能自定义成 macOS
那样呢?当然也是可以的,一起来看看吧!
一、自定义滚动条外观
考虑到桌面端现在已经是 -webkit- 的天下了,自定义均已 chrome 为例。
自定义滚动条需要用到两个关键的为元素 ::-webkit-scrollbar 和 ::-webkit-scrollbar-thumb:
::-webkit-scrollbar滚动容器样式
::-webkit-scrollbar-thumb滑块样式
下面是 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-radius: 2px solid red; }
效果如下:
既然这样就好办了,把边框设置成透明不就行了吗,由于是透明,默认情况下北京会覆盖到边框,所以还需要背景作用域 (backgroud-clip
)
::-webkit-scrollbar-thumb{ border: 2px solid transparent; background-clip: content-box; }
效果如下:
三、将滚动条悬浮在内容之上
还有一个比较重要的特性没有实现,那就是滚动条的位置。macOS
的滚动类似于悬浮在内容之上,不占据任何页面空间,那么,Windows
可以做到吗?不仅可以,而且十分容易,只需要一个属性。
body{ overflow: overplay; /* 滚动条会覆盖在页面之上 */ }
效果如下:
四、滚动时才出现
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) })
配合一点儿 css
。
::-webkit-scrollbar-thumb{ background-color: transparent; } body[scroll]::-webkit-scrollbar-thumb{ background-color: rgba; }
虽然做出来后已经非常接近 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; }
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.Windows 和 macOS 的滚动条不一致,很多设计师觉得 Windows 不太美观,有必要自定义;
2. 自定义滚动条需要用到两个关键的为元素 ::-webkit-scrollbar 和 ::-webkit-scrollbar-thumb;
3. 滚动滑块与滚动容器之间的间隙可以通过 border 和 background-clip 来实现;
4. 给滚动容器设置 overflow: overplay,可以是滚动条悬浮于内容之上;
5. 滚动时出现需要借助 js 定时器。
另外,有同学问 firefox 怎么办呢?没关系,不用管它,桌面端早就是 chrome 的天下了,占比超过 70%。还有一点,这是个视觉体验的优化,即使 firefox 不支持也不影响滚动条的功能,有什么理由不去使用呢?