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

相关文章
|
9月前
|
移动开发 前端开发
H5长页面禁止垂直滚动
H5长页面禁止垂直滚动
64 0
|
9月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
小程序 前端开发 容器
微信小程序隐藏右侧滚动条并可以滚动
微信小程序隐藏右侧滚动条并可以滚动
501 0
|
9月前
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
1078 0
|
5月前
|
前端开发 JavaScript
原生撸移动端顶部滚动菜单栏,实现可滚动控制滚动边界动态样式
本文介绍了如何使用原生HTML、CSS和JavaScript创建一个移动端可滚动的顶部菜单栏。文章提供了详细的HTML结构、CSS样式和JavaScript代码,实现了菜单项的横向滚动、边界控制和动态样式变化。同时,还展示了如何通过触摸事件监听来控制菜单项的滚动和激活状态。
93 2
原生撸移动端顶部滚动菜单栏,实现可滚动控制滚动边界动态样式
|
7月前
|
前端开发 C++
css实用技巧——锁定页面,禁止滚动 vs 解锁页面,恢复滚动
css实用技巧——锁定页面,禁止滚动 vs 解锁页面,恢复滚动
253 0
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
84 0
|
9月前
在viewWillAppear函数中禁止左滑,viewWillDisappear开启左滑动产生进入下一个页面来回滑动造成无法点击点击按钮问题
在viewWillAppear函数中禁止左滑,viewWillDisappear开启左滑动产生进入下一个页面来回滑动造成无法点击点击按钮问题
47 0
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
|
小程序 前端开发 JavaScript
微信小程序分类菜单激活状态跟随列表滚动自动切换
微信小程序分类菜单激活状态跟随列表滚动自动切换
184 0