H5长页面禁止垂直滚动

一、问题

H5长页面在提交表单后会有弹窗反馈，这时需要禁止垂直滚动，否则会很怪

二、解决

方式一：overflow: hidden;

在弹窗出现后为 body 增加 overflow: hidden; 弹窗关闭后恢复；通过增删class或是动态设置css都可，但是本方案在我这里并没有起作用

方式二：preventDefault()

在弹窗出现后为 body 增加 touchmove 事件监听，触发 preventDefault() ，弹窗关闭后移除监听。但是本方案在我这里并没有起作用

方式三：手动实现

1. 定义全局变量：pageYOffset
2. 在弹窗出现后，获取当前窗口（左上角）垂直坐标：this.pageYOffset = window.pageYOffset
3. 相对于浏览器窗口进行定位：$("body").css('position', 'fixed')
4. 设置顶距（在下一步后才生效）：$("body").css('top', `-${this.pageYOffset}px`)
5. 弹窗关闭后，还原定位方式：$("body").css('position', 'static')
6. 并滚动到之前位置：window.scrollTo(0, this.pageYOffset)

注意：

• scrollTo 而非 scrollBy