记录在IOS上处理弹性滑动的坑

1.背景

前几天leader告我写的H5项目，有客户反馈滑动弹窗上元素时底部页面也会跟着滑动，吓得我赶紧拿出自己手机试试，结果发现自己手机（安卓）上是正常的，于是找来iphone一试，果然，心里一万匹草泥马在奔腾。。。。。。然后开始了代码调试

2.调试过程

2.1 原逻辑

弹窗开启，设置html：overflow-y:hidden

弹窗关闭，设置html：overflow-y:auto

发现手指正常滚动弹窗没有问题，当弹窗元素触底或触顶时，继续向下或向上滑动，发现底部页面会跟着运动，且手指松开页面回弹，发现是ios浏览器自带橡皮筋滑动效果的锅，造成底部页面跟着滑动的假象

2.2 处理ios橡皮筋滑动

2.2.1 css处理

给页面添加css overscroll-behavior-y: none调试发现：弹窗未开启时，底部页面触底继续滑动时，便划不动了，心想这不正是我想要的效果吗，以为问题就这么解决了 心里那个激动，然而现实总是很打脸，当我打开弹窗，同上操作时，发现跟上述一样的效果。。。解决无果

2.2.2 js处理

既然上述css的方法不行，那换个js

1、使用 inobounce

弹窗开启，调用inobounce

 inobounce.enable()

设置页面滚动元素css

-webkit-overflow-scrolling: touch;

弹窗关闭，禁用inobounce

inobounce.disable()

发现页面所有的滚动都被禁止了。。。无果

最后

网上找了资料，试了好多都不行

最后通过固定定位解决

弹窗开启时添加如下逻辑

const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
  document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'

弹窗关闭和离开页面时添加如下逻辑

const body = document.body
  body.style.position = ''
  const top = body.style.top
  document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
  body.style.top = ''

然后在ios 11 pro上调试 发现问题解决

完结撒花~~~