禁止H5页面在iOS系统中滑动回弹效果导致的穿透

移动端开发时，H5长页面在iOS系统中滑动时，当页面滑动到顶部或底部时，页面还能够上滑或下滑，手指离开屏幕后回弹，这就时橡皮筋效果，单纯来说这个效果并没有什么问题，但是它对H5页面却并不友好，会导致穿透，导致H5页面出现被截断的假象；参考了很多文章之后，我采用了如下办法，亲测好用：使用插件inobounce（但是只适用于ios系统，安卓不适用）

移动端开发时，H5长页面在iOS系统中滑动时，当页面滑动到顶部或底部时，页面还能够上滑或下滑，手指离开屏幕后回弹，这就时橡皮筋效果，单纯来说这个效果并没有什么问题，但是它对H5页面却并不友好，会导致穿透，导致H5页面出现被截断的假象；

参考了很多文章之后，我采用了如下办法，亲测好用：

使用插件inobounce（但是只适用于ios系统，安卓不适用）

npm install inobounce -s

在需要处理的页面上添加如下代码：

<script> 
import inobounce from 'inobounce' 
export default { 
data() { 
return { } 
}, 
mounted() { }, 
created() { 
let u = navigator.userAgent if (u.indexOf('iPhone') > -1) { inobounce.enable() }
}, 
beforeDestroy() { 
inobounce.disable() 
},
methods: { } 
} 
</script>

就可以完美解决了，这样就禁止了h5页面的所有回弹效果；所有页面就无法滚动了；

解决方案：

在需要滚动条的页面或者模块加入如下代码即可实现局部滚动：

.body-scroll{ padding: 15px 15px 55px 15px; background: #f7f7f7; height: calc(100% - 70px);overflow-y: scroll;
-webkit-overflow-scrolling: touch;}