一、问题
H5长页面在提交表单后会有弹窗反馈,这时需要禁止垂直滚动,否则会很怪。。。
二、解决
方式一:overflow: hidden;
在弹窗出现后为 body
增加 overflow: hidden;
弹窗关闭后恢复;通过增删class或是动态设置css都可,但是本方案在我这里并没有起作用。。。
方式二:preventDefault()
在弹窗出现后为 body
增加 touchmove
事件监听,触发 preventDefault()
,弹窗关闭后移除监听。但是本方案在我这里并没有起作用。。。
方式三:手动实现
- 定义全局变量:
pageYOffset
- 在弹窗出现后,获取当前窗口(左上角)垂直坐标:
this.pageYOffset = window.pageYOffset
- 相对于浏览器窗口进行定位:
$("body").css('position', 'fixed')
- 设置顶距(在下一步后才生效):
$("body").css('top', `-${this.pageYOffset}px`)
- 弹窗关闭后,还原定位方式:
$("body").css('position', 'static')
- 并滚动到之前位置:
window.scrollTo(0, this.pageYOffset)
注意:
scrollTo
而非scrollBy
over