【笔记】H5长页面禁止垂直滚动

简介: 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

over

相关文章
|
18天前
|
移动开发 前端开发
H5长页面禁止垂直滚动
H5长页面禁止垂直滚动
20 0
|
17天前
高亮提示、聚焦控件并滚动到浏览器中刚刚好可以查看到该控件的位置
高亮提示、聚焦控件并滚动到浏览器中刚刚好可以查看到该控件的位置
|
3月前
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
|
6月前
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
29 0
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
|
7月前
|
容器
uniapp滚动页面改变背景颜色
uniapp滚动页面改变背景颜色
121 0
|
7月前
|
移动开发
移动端开发H5页面点击按钮后出现闪烁或黑色背景的解决办法
移动端开发H5页面点击按钮后出现闪烁或黑色背景的解决办法
|
8月前
uniapp禁止页面滚动
uniapp禁止页面滚动
391 0
uniapp:禁止蒙版下的页面滚动
uniapp:禁止蒙版下的页面滚动
130 0
滚动条案例(点击跳转到指定地点,上下滑动跟随显示标题)
滚动条案例(点击跳转到指定地点,上下滑动跟随显示标题)