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

桃扇骨 2022-05-15 11:35 185阅读 0赞

原文出处：[https://www.jianshu.com/p/704926419e14][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  
來源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[https_www.jianshu.com_p_704926419e14]: https://www.jianshu.com/p/704926419e14