H5&IOS&Android-入坑指南

入坑零：IOS不支持position：fixed。有问题。

入坑一：解决overflow: auto在Ios与安卓系统中滑动不流畅的问题（chrome模拟测试没问题）

法一：

body {-webkit-overflow-scrolling: touch;}

在滚动容器内加-webkit-overflow-scrolling: touch
但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有 绝对定位（absolute, fixed） 属性的元素，也会跟着滚动。(被坑过…)

法二（推荐使用法二）：

body {overflow-x: hidden;overflow-y: auto;}
.*滚动容器*{overflow-y: auto}

即，给 body 元素添加overflow-x：hidden。然后在滚动容器内加overflow-y: auto

入坑二：Ios与安卓系统中，input唤出键盘，退出键盘之后，页面上顶之后不回弹（但是chrome模拟测试没问题）。

$('input').on('blur', function () {
  setTimeout(function(){
    var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
  }, 100);
});

给input加blur事件，重新设置滚动条的位置。
特别注意position: fixed的元素在ios里，收起键盘的时候会被顶上去，特别是第三方键盘。

入坑三：Ios中，点击空白处，无法将弹框消失。但是安卓和chrome模拟器没有问题。

 // 点击空白处取消添加
 $('body *').bind("click", function (e) {
    if ($(e.target).closest('.content-box').length === 0 && $(e.target).closest('.footer-box').length===0) {
        $('#sourceList,.security-result-box').empty()
        $('#sourceInput,#securityInput').val('')
        $('#sourceResInter').removeClass('source-height')
        $(".mask,.el-show").hide()
    }
})

不要使用 $(‘document’)，因为IOS没有document的说法，用 $(‘body *’)

入坑四：这次不是ios了，ios和安卓都有问题；保存按钮用flex固定到底部，滑动的时候还是会有上滑的bug;

可以作为模板；

//css:
<style>
 .flex0{
     -webkit-flex: 0 0 auto;
     -moz-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     -o-flex: 0 0 auto;
     flex: 0 0 auto;
 }
.flex1{
     -webkit-flex: 1 1 auto;
     -moz-flex: 1 1 auto;
     -ms-flex: 1 1 auto;
     -o-flex: 1 1 auto;
     flex: 1 1 auto;
 }
.main-container{
  	position: absolute;
 	left: 0;
  	bottom: 0;
  	-webkit-overflow-scrolling: touch;
  	overflow-y: auto;
  	height: 100vh;width:100%;
  	display: -webkit-flex;
  	display: flex;
  	flex-direction: column;
}
 .save{
      background-color: #cfa959;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
      text-align: center;
  }
</style>
<div class="main-container">
	<div class="table-container flex1"></div>
	<div class="save flex0">保存</div>
</div>