ionic1开发之ion-scroll仅水平滚动时不能上下拉动

原文出处：https://www.jianshu.com/p/704926419e14

随着项目开发的深入，功能的逐渐完善，做到后面就开始要追求用户体验的优化了。
之前在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机上完全没问题！（仅支持android 6.0及以上版本）
但是，在iOS上你会发现，它完全不会滚动起来。在经过了大量的搜索之后，才发现少了最关键的一步 :

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

作者：hhjjj1010
链接：https://www.jianshu.com/p/704926419e14
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。