IOS溢出不滚动的问题及解决方案

最近做的项目在手机端使用的时候踩了个坑，自己埋头研究了挺久才明白问题的源头，现在写出来给大家分享一下

这里说的坑指的是在IOS手机端打开页面以后内部控件的局部滚动效果无法使用的问题，这个情况也只在IOS的手机上会出现，以下：

----------------------------------------我是分割线--------------------------------------------

问题描述：

    ios浏览器局部滚动默认没有弹性滚动的效果。

解决方案：

    在需要使用弹性滚动的控件外层加上一个div，为这个div加上一个比较常用的样式和一个比较少见的样式，分别是

overflow-x:scroll;
-webkit-overflow-scrolling: touch;

这里主要需要的是针对webkit引擎的兼容滚动效果，关于这个样式比较详细的描述文档看这里

在我实际的开发项目中，仅仅引用这两个样式会有点不够用，在第一次使用的时候暴露出比较大的问题，主要原因是这个div没有定义实际的大小，这导致默认的大小来自于子元素的大小撑开，而子元素中其实又很多东西是浮动甚至是做了定位的，这样在自动计算div大小的时候就会存在很大的误差导致展示效果很差。

这个问题其实也好解决，只要加载div的时候为这个div计算出它应有的实际宽高然后固定下来就好了，如果这个宽高不好写有两种方案解决，一种是依靠百分比，一种是使用JS计算以后赋值，我的项目中使用的是后者，各位如有需要可以按照自己的实际情况来进行。

注：在-webkit-overflow-scrolling这个样式的描述文档里说这个样式没有继承，但是在我实际的测试中却是有继承的效果的，嫌麻烦的可以选择直接在主页面（iframe的外层HTML）的body上赋值这个样式，在之后的元素中似乎也能继承上，感兴趣的可以自己使用试试~