【笔记】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

相关文章
|
6月前
|
移动开发 前端开发
H5长页面禁止垂直滚动
H5长页面禁止垂直滚动
53 0
|
6月前
高亮提示、聚焦控件并滚动到浏览器中刚刚好可以查看到该控件的位置
高亮提示、聚焦控件并滚动到浏览器中刚刚好可以查看到该控件的位置
|
6月前
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
875 0
|
2月前
|
前端开发 JavaScript
原生撸移动端顶部滚动菜单栏,实现可滚动控制滚动边界动态样式
本文介绍了如何使用原生HTML、CSS和JavaScript创建一个移动端可滚动的顶部菜单栏。文章提供了详细的HTML结构、CSS样式和JavaScript代码,实现了菜单项的横向滚动、边界控制和动态样式变化。同时,还展示了如何通过触摸事件监听来控制菜单项的滚动和激活状态。
53 2
原生撸移动端顶部滚动菜单栏,实现可滚动控制滚动边界动态样式
|
4月前
|
前端开发 C++
css实用技巧——锁定页面,禁止滚动 vs 解锁页面,恢复滚动
css实用技巧——锁定页面,禁止滚动 vs 解锁页面,恢复滚动
199 0
|
6月前
|
Android开发
热点共享蓝条下压,导致页面底部按钮显示不全的完美解决方案
热点共享蓝条下压,导致页面底部按钮显示不全的完美解决方案
32 0
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
74 0
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
|
6月前
|
小程序
微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)
微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)
uniapp禁止页面滚动
uniapp禁止页面滚动
558 0