首发于 Web开发

浏览器实现移动端滚动条效果

solos

软件设计师

细心的用户会发现，同样身为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; 
}

最终效果：

编辑于 2019-10-25 10:23

HTML+CSS

前端开发

前端工程师

文章被以下专栏收录

Web开发

Web Development