ionic ion-content 内ion-scroll内无法上下滑动 ion-content 内容

随着项目开发的深入，功能的逐渐完善，做到后面就开始要追求用户体验的优化了。
之前在app的首页上有一个抢购模块是通过ion-scroll来实现水平滚动。单从功能上来说是没有问题的，通过direction="x"来控制scroll只在水平方向滚动。
但是此时有一个问题，当触摸点在scroll的范围内的时候，只能水平滚动，而页面却不能被上下拉动。要想上下拉动页面就必须要把触摸点放到scroll外去，这并不是一个好的用户体验。

---

在通过大量的搜索之后，网上给出的方法有两种：

1. 通过写js来控制滑动
   js监听touch事件，获取到当前touch的位置，并和touch开始的位置作比较，通过这个差值来计算dom元素应该怎么滚动，具体的代码这里就不贴了。因为本身js功底薄弱，copy的代码实现了滚动，但是出来的效果并不理想，本来手指滑动的速度很慢，但是dom的滑动的速度却很快。所以最终还是就放弃了这种实现方法。

2. 通过css的overflow来实现
   这种方法相对第一种就要简单得多了，根本不需要写任何的js代码就可实现水平滚动。

    <div class="imc-scroll">   <div>     <img><img><img>   </div> </div> .imc-scroll {   width: 100%;   height: 140px;   white-space: nowrap;   overflow-x: scroll;   overflow-y: hidden;   overflow-scrolling: touch;   -webkit-overflow-scrolling: touch /*iOS 滚动弹簧效果 */ }

你以为到这里就大功告成了吗？是的，在android机上完全没问题！但是，在iOS上你会发现，它完全不会滚动起来...
在经过了大量的搜索之后，才发现少了最关键的一步 :

    ### <ion-content overflow-scroll="true">

作者：hhjjj1010
链接：http://www.jianshu.com/p/704926419e14
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。