细心的用户会发现,同样身为Chrome浏览器,PC端和移动端的滚动条效果是不同的。以百度新闻首页为例,移动端Chrome浏览器打开效果是这样的:
这与PC端滚动条的效果有两个明显的区别:
- 滚动条是滚动时才出现的
- 滚动条是悬浮在内容上方的
可能有些同学会说:”我的PC端和移动端效果差不多啊,都是悬浮在内容上方的,滚动条也是滚动时出现不滚动就隐藏的“。那我可得说道说道了。
首先,滚动条效果是受操作系统影响的,以MAC为例,在系统偏好设置里有滚动条默认行为的设置:
如果设置了滚动时才有,那就有了移动端的滚动时才出现的效果。但是如果我们开发web应用,想要用户有一致的体验,显然不能通过用户的设置来保证,得想其他办法。
其次:”PC端浏览器滚动条是悬浮在内容上方“的说法也不准确。这其实需要有一个前提,就是你浏览器的滚动条没有自定义过样式的情况下,它才会默认悬浮在内容上方。
你可能会说浏览器默认滚动条效果就不错啦,不用设置自定义样式了。但是,不通过自定义样式,你怎么让滚动条有移动端那样滚动时才出现的效果呢?
所以如果你要想要PC端浏览器有移动端滚动条的效果,你就会面临这样的问题:你需要设置滚动条的样式,但是设置了滚动条的样式你就会让滚动条悬浮效果失效,比如像下面这样:
这样全屏颤抖的体验显然很不好。
下面就要说重点了,这个问题怎么解决呢?就是下面这行css了:
overflow: overlay;
这个属性几乎就是为了解决这个问题量身定做的,需要注意的是目前只有webkit内核的浏览器才支持,chrome,safari上用用是没问题的。
实现完整移动端滚动条效果的代码:
::-webkit-scrollbar { /* 滚动条整体样式 */
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 10px;
}
::-webkit-scrollbar-thumb { /* 滚动条里面小方块 */
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #eeeeee;
}
::-webkit-scrollbar-track { /* 滚动条里面轨道 */
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
border-radius: 10px;
}
.auto-scroll { overflow: overlay; ... } /* 需要滚动的地方加上这个class */
.auto-scroll ::-webkit-scrollbar { /* 组件内滚动条不显示 */
display: none;
}
.auto-scroll:hover ::-webkit-scrollbar { /* 悬停时滚动条才显示 */
display: block;
}
最终效果: