1. 阻止默认滑动行为

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

结果整个页面都无法滑动，不是我要的效果。如果是有页面不要滑动的那种可以尝试。

2. 使用 vue-bounce

使用 vue-bounce 来解决，也没啥用。不知道是不是我打开的方式不对。

安装

$ npm install vue-bounce

// main.js
import Bounce from 'vue-bounce'

Vue.use(Bounce)

使用指令

<div class="container" v-bounce>
    ...scroll element
</div>

.container {
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

PS：又尝试了一下，还是有点效果的。就是在顶部进行下拉时会禁用掉 touchmove 事件，但是效果还是不好。因为我可能先往下滑滑不动又往别的方向滑。

3. 通过 ios 端关闭弹性效果

灵光一闪，想问下 IOS 端的同学能不能把弹性关了，他给出的解决方案，结合我们 native 端使用了 flutter，给出方案：

_webView.scrollView.alwaysBounceVertical = NO;
_webView.scrollView.bounces = NO;

我让 native 端的同学进行尝试，结果据 flutter 端同事回复，这个开关只关闭了页面整体边缘的橡皮筋效果，对于 H5 内 div 的边界弹性效果无效。

4. 关闭 body 的滑动，只允许目标元素滑动

网上找的方案，明显不对味。

// Prevents window from moving on touch on older browsers.
window.addEventListener('touchmove', function (event) {
  event.preventDefault()
}, false)

// Allows content to move on touch.
document.querySelector('.body-container').addEventListener('touchmove', function (event) {
  event.stopPropagation()
}, false)

没什么用……感觉这个是解决页面整体弹性滑动的。

5. 使用 overscroll-behavior

使用一个新的 CSS 属性来实现

container {
  overscroll-behavior: none;
}

结果，依旧不行。

6. 使用 iNoBounce

使用 https://github.com/lazd/iNoBounce 来阻止回弹效果，发现效果应该是和 vue-bounce 一样，在用户直接拖拽边缘的时候禁用移动行为，但依然存在来回滑动没反应的情况。

7. 阻止默认滑动行为，自己用 JavaScript 控制滑动

最后通过自己写拖拽滑动，的确解决了这个问题。解决方案在 解决 IOS 13+ H5 滑动边界橡皮筋弹性效果
一文中。