解决IOS橡皮筋问题

在ios系统中，页面在上下滑动的时候，会触发橡皮筋问题，页面的顶部和底部跟着页面一起滑动的问题，下面就讲一下如何解决这种问题。

1、iOS如何阻止“橡皮筋效果”？
背景：
iOS 5 之后开始支持 Native Scrolling，为 Web App 带来媲美原生应用的滚动体验。使用十分方便只要在 CSS 中加入：

HTML

CSS
.wrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}

但是 iOS Safari 在滑动的时候会有讨厌的 “橡皮筋效果” （Over Scroll）：

设计：
┌─────────────┐
│ Header │
├─────────────┤
│ │
│ Scroll Area │
│ │
├─────────────┤
│ Footer │
└─────────────┘

需求：
Scroll Area 支持垂直区域滚动。
滑动 Header 和 Footer 不会引发全局的 “橡皮筋效果”。
Scroll Area 滑动到顶部或者底部，再向上或者向下拉动不会触发全局的 “橡皮筋效果”。
情况2 会触发 Scroll Area 局部的 “橡皮筋效果”。

2、如何解决

我是用RN开发的，我这个核心方法，应该前端都使用，你们把一进页面的触发事件改下就行了。
A页面（A引入B方法）

//一进页面的时候执行的方法
 isIosStopScroll() {
    const ios = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // 判断是否为ios
    if (ios) {
      var divEl = document.getElementById('myCardList'); //这是你需要定义的容器，这个容器里滑动正常，出了这个容器，页面的橡皮筋效果就被禁用掉了
      iosTrouchFn(divEl);
    }
 }

 componentDidMount() {
    this.init(); //这是页面加载内容的事件，可以忽略
    this.isIosStopScroll(); //这里开始执行
 }

Bjs文件

//解决ios橡皮筋问题
export function iosTrouchFn(el) {
  //el需要滑动的元素
  el.addEventListener('touchmove', function (e) {
    e.isSCROLL = true;
  })
  document.body.addEventListener('touchmove', function (e) {
    if (!e.isSCROLL) {
      e.preventDefault(); //阻止默认事件(上下滑动)
    } else {
      //需要滑动的区域
      var top = el.scrollTop; //对象最顶端和窗口最顶端之间的距离 
      var scrollH = el.scrollHeight; //含滚动内容的元素大小
      var offsetH = el.offsetHeight; //网页可见区域高
      var cScroll = top + offsetH; //当前滚动的距离

      //被滑动到最上方和最下方的时候
      if (top == 0) {
        top = 1; //0～1之间的小数会被当成0
      } else if (cScroll === scrollH) {
        el.scrollTop = top - 0.1;
      }
    }
  }, { passive: false }) //passive防止阻止默认事件不生效
}