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

背景

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

解决过程

刚开始一看，这不很简单吗，给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 框架来处理移动端的这种问题。

集成 iScroll

滚动视图容器需要满足的三个条件：

• 滚动视图大小固定，且设置 overflow:hidden
• 在滚动视图内套一层滚动容器，如果需要x轴滚动，需要设置超出滚动视图的宽
• 所有需要滚动的内容，全部放在滚动容器内部

需要注意的问题：

• iScroll 需要在DOM加载完毕过后在进行初始化，vue 组件中初始化 iScroll 一定要在 mounted 钩子函数中，并且使用this.$nextTick()回调，也可以用 setTimeout 延迟执 iScroll 的初始化。