解决IOS中的超出滑动问题

一时失言乱红尘 2023-02-24 14:29 10阅读 0赞

原文出处：[https://blog.csdn.net/Lucky\_Q/article/details/88360187?utm\_medium=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth\_1-utm\_source=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase][https_blog.csdn.net_Lucky_Q_article_details_88360187_utm_medium_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase]

项目中遇到的一个小bug, 折磨了整整一下午  
遇到的问题就是:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0x1Y2t5X1E_size_16_color_FFFFFF_t_70]

要求：  
1、表体和表头超出部分左右滑动；  
2、表体支持上下滑动；  
3、表头不能跟着上下滑动；  
在安卓上没有任何问题,  
可是在IOS上客户就反映, 需要整体左右滑动的时候, 手指放在表体上，只能上下滑动, 无法左右滑动, 想要左右滑动必须在表头上左右滑动才能实现  
下面粘一下html结构和css样式:

<div class="box">
        <div class="content">
          <div class="title">
            <span>机构</span><span>排名</span><span>总分</span><span>犹豫期电话回访成功率</span><span >犹豫期电话回访成功率评分</span><span >万张保单投诉量</span><span >万张保单投诉量评分</span>
          </div>
          <div class="tBody">
            <div class="tContent">
              <div><span>机构</span><span>排名</span><span>总分</span><span>犹豫期电话回访成功率</span><span >犹豫期电话回访成功率评分</span><span >万张保单投诉量</span><span >万张保单投诉量评分</span></div>
              <div><span>机构</span><span>排名</span><span>总分</span><span>犹豫期电话回访成功率</span><span >犹豫期电话回访成功率评分</span><span >万张保单投诉量</span><span >万张保单投诉量评分</span></div>
              <div><span>机构</span><span>排名</span><span>总分</span><span>犹豫期电话回访成功率</span><span >犹豫期电话回访成功率评分</span><span >万张保单投诉量</span><span >万张保单投诉量评分</span></div>
    			.......
    		  <div><span>机构</span><span>排名</span><span>总分</span><span>犹豫期电话回访成功率</span><span >犹豫期电话回访成功率评分</span><span >万张保单投诉量</span><span >万张保单投诉量评分</span></div>
            </div>
          </div>
        </div>
      </div>

.box {
    	width: 100%;
    	overflow-x: scroll;
    	-webkit-overflow-scrolling: touch;
      }
      .content {
        width: 2000px;
      }
      .title {
        height: 100px;
      }
      .tBody {
        overflow-y:scroll; 
        height: 400px;
      }
      .tContent div{
        height: 100px;
        display: table;
      }

其实解决方法就只需要一行属性就行, 就是在最外层的div里加一句

-webkit-overflow-scrolling: touch;

这样就可以完美解决IOS端的超出滑动的问题了

[https_blog.csdn.net_Lucky_Q_article_details_88360187_utm_medium_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase]: https://blog.csdn.net/Lucky_Q/article/details/88360187?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0x1Y2t5X1E_size_16_color_FFFFFF_t_70]: /images/20230209/0132fe2cf8fe45f88d445cc93e29d11a.png