移动端ios中H5动态加载数据滚动不了
记一次ios兼容问题，一个中秋节基本上一半时间都在测试这个问题，好在最后问题解决了，心情舒畅。
首先出现的问题是在，我在react中用到了mescroll，从列表跳转详情，很简单的需求，安卓机上没啥问题，测试人员提出的问题：在iphone手机上详情页面信息显示不全，也滚动不了。（当时我是不信的）
然后自己拿过来iphoneX手机试了一下，确实显示不全，也不能滚动，然后就在想滚动是不是被限制了，赶紧去查代码中有没有
影响一
document.addEventListener(‘touchmove’, function(e) { e.preventDefault(); }, false)
经检查不是它影响的，崩溃1。
因为项目中也引入了其他插件的样式，所以会不会是其他样式中含有overflow:hidden。
影响二
overflow:hidden
经检查不是它影响的，崩溃2。
然后我就跳出来了可能不是滚动条的问题，是不是引入的mescroll影响到了，赶紧把引入的mescroll.css注释掉，再试，还是有问题。
影响三
引入的mescroll等第三方插件影响
经检查不是它影响的，崩溃3。
然后我把代码在本地浏览器chrome上（iphone模式）跑一下，跳转详情页面，鼠标滚轴可以滚动，手动滑动确实没反应，然后刷新一下页面可以滚动了，重新再来一次，初始化进入页面不可以滚动，刷新可以滚动，鼠标滚轴可以滚动，当时的心情又喜又无语，喜的是复现了问题， 无语的是这是啥玩意问题。
经过长时间的搜索资料（中间尝试了无数种方案和猜测，略过吧，都是泪），发现问题可能出现在ios在渲染页面前，对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。 所以我的页面可能在创建 UIScrollView 的时候，并没有渲染完毕，所以认为它是不可滚动的。
解决办法：
方法就是在-webkit-overflow-scrolling:touch属性的下一层子元素上，将height加1%或1px。从而主动触发scrollbar
main-inner {
min-height: calc(100% + 1px)
}
main:after {
min-height: calc(100% + 1px)
}
参考： https://www.cnblogs.com/xiahj/p/8036419.html
===============================================================
你以为就完了？错！所有办法在我这都不起作用，彻底崩溃！！！！！！
看到了文章最后一句话 “如果不想那么费心，直接上iScroll ”，这句话点醒我了，我页面中列表页面用到了mescroll，所以这个页面直接给他一个scroll的环境包裹一下试一试不就行了，经过尝试完美解决了这个蛋疼的问题。
===================== 完结 ====================
知道真相的我眼泪掉下来！！！！！！
上边虽然解决了一个页面的问题，但是经测试只要经过订单页面的页面，滚动就不行了，妈蛋，然后冷静下来，从头分析order这个页面所有的内容，突然发现了一个mescroll的配置项
isBounce: false
这个是禁止ios下拉回弹，就是比如微信上边显示当前网址信息的部位（
http://www.mescroll.com/qa.html#q10 ），改成true，一切问题解决了，一切之前的疑惑全都解开了，对，就是这个配置项，眼泪……….
总结：虽然最后的问题是一个配置的问题，但是也从头到尾过了一下ios的滚动兼容问题，相信下次不会出现上边出现的问题了，加油！！！
欢迎关注小程序，感谢您的支持！
