H5之移动端如何让滚动条不隐藏

本文介绍: 原来是手机浏览器不支持自定义 scroll，只对 PC 端浏览器生效，推荐使用 iScroll 框架来处理移动端的这种问题。然后在想，是不是其他地方改变了滚动条的显示。找了一圈，也没有啊。

背景

需求如下图，就一个弹窗，里面的内容随着内容溢出，需要显示滚动条，使用户更好地感知下面还有内容。

解决过程

刚开始一看，这不很简单吗，给content区域加个 overflow-y: scroll; 就完事了。搞完之后在谷歌浏览器的模拟手机面确实成功了，以为OK，但放到真机上面一看，滚动条却没有显示。心里一颤，这咋回事，见鬼了？

然后在想，是不是其他地方改变了滚动条的显示。找了一圈，也没有啊。实在没什么头绪，只能硬着头皮去搜索引擎找原因。

一开始是找到了这种答案，没用：

// 基本css代码
overflow-y: scroll; // 滚动显示
-webkit-overflow-scrolling: touch;  // 滚动回弹

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
&::-webkit-scrollbar  
{  
    width: 16px;  
    height: 16px;  
    background-color: #F5F5F5;  
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
&::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  
  
/*定义滑块 内阴影+圆角*/  
&::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}

再折腾了一圈，在StackOverflow找到了一条问答：html – Mobile webkit scroll bars – Stack Overflow

原来是手机浏览器不支持自定义 scroll，只对 PC 端浏览器生效，推荐使用 iScroll 框架来处理移动端的这种问题。