关于ios手机上拉和下拉到底部和顶部的橡皮筋问题

之前遇到一个问题，就是写了一个正常的移动端首页，底部是导航，上面的是内容，在安卓手机是页面滑动到底部的时候，不会再滑动的，但是问题就出现在ios手机中。
页面正常布局是，导航是position：fixed，z-index：9，其他整体布局差不多是position：relative，z-index：1
（1.）滑动到底部的时候，ios手机还可以再次滑动，以至于把底部的导航条越过去了，导致看不到导航条，影响用户体验。
网上搜到的解决办法有几种
1.如果页面是没有滚动条的，可以使用下面的js代码

1 document.body.addEventListener('touchmove', function (e) {
2       e.preventDefault() // 阻止默认的处理方式(阻止下拉滑动的效果)
3     }, { passive: false }) // passive 参数不能省略，用来兼容ios和android

这几行代码是禁止整个页面的滑动，所以很好理解，下面看第二种
2.页面有很多内容，存在滚动条
那么解决办法就是，
在页面的最外层设置

.wrapper{
  width:100%;
  height:100%;
  position:fixed;
  z-index：1；
  overflow-y:auto;
}

然后再去看ios的页面，成功阻止了这种橡皮筋效果
这里的height和width移动要设置100%；允许overflow-y:auto

by：闫