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 滑动边界橡皮筋弹性效果
一文中。
