背景

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

解决过程

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

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

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

  1. // 基本css代码
  2. overflow-y: scroll; // 滚动显示
  3. -webkit-overflow-scrolling: touch;  // 滚动回弹
  5. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
  6. &::-webkit-scrollbar  
  7. {  
  8.     width: 16px;  
  9.     height: 16px;  
  10.     background-color: #F5F5F5;  
  11. }  
  13. /*定义滚动条轨道 内阴影+圆角*/  
  14. &::-webkit-scrollbar-track  
  15. {  
  16.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
  17.     border-radius: 10px;  
  18.     background-color: #F5F5F5;  
  19. }  
  21. /*定义滑块 内阴影+圆角*/  
  22. &::-webkit-scrollbar-thumb  
  23. {  
  24.     border-radius: 10px;  
  25.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
  26.     background-color: #555;  
  27. }

再折腾了一圈，在StackOverflow找到了一条问答：https://stackoverflow.com/questions/11825156/mobile-webkit-scroll-bars

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

集成 iScroll

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

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

需要注意的问题：

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