最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下:

方法一:弹出菜单时给body和html添加一个css样式:height:100%;overflow:hidden;弹出层消失再去掉这个类。(只给body添加样式在安卓机上无效果)

css代码:.add{height:100%;overflow:hidden;}

JQuery代码:弹出菜单时给body添加类(.add)

$('body,html').addClass('add');

菜单隐藏时给body去除add类

$('body,html').removeClass('add');

这种方法在弹出菜单时body会回到顶部,所以对这种效果不要求的话可用。

解决:弹出层出现时给body添加样式position:fixed,并算出当时页面的scrollTop滚动值,给body一个负的top值来保证body不会回到顶部,弹出层消失时恢复。

方法二:定位层之间好像是不会传递事件的,将弹窗之外的元素包在一个div里,给这个div设置定位样式,给宽高是充满屏幕的,设置overflow:auto;这样这个div和弹出层就是两个定位层,滑动弹出层时不会传递到div上的。固定div的高度是屏幕的高度,overflow:auto使滚动发生在div内部,这样弹出层的滚动就不会传递给div了,如果不给设置高度,弹出层的滚动事件仍然会传递给body,div就会随着body滚动。

这种方法在iphone手机上效果不是太好。

方法三:在需要滚动的元素上加上-webkit-overflow-scrolling : touch;

效果待验证。

JQuery弹出菜单时禁止页面(body)滚动的更多相关文章

  1. 解决Mui中popover 顶部弹出菜单弹出位置不准确以及无法收回的问题

    前言 最近公司的项目转向使用Hbuilder开发移动端项目,其中想要通过在顶部标题栏加入弹出菜单的方式,来定位长列表的位置,如图所示. 问题 Mui的功能貌似还不是很完善,在使用这个弹出菜单的时候,发 ...

  2. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

  3. selenium定位弹出菜单

    写selenium脚本,在浏览器定位各种弹出菜单时,有时用工具很难去取菜单的属性,下面说下如何去取: 点开firebug ,切换到“脚本”界面,首先在输入框输入单字母s,待弹出下拉列表后,单击左侧的插 ...

  4. iOS_21团购_顶部菜单和弹出菜单联动

    最后效果图: 各控件关系图1: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize ...

  5. 向上弹出菜单jQuery插件

    插件名:柯乐义英文名:Keleyijs文件名称:jquery.keleyi.js插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单. 示例查看:http://keleyi.com/kel ...

  6. iOS如何禁用长按页面弹出菜单

    iOS如何禁止用户长按页面导致弹出菜单? 给元素设置样式: -webkit-touch-callout:none; 补充:同样适用于图片如果想禁止用户保存或者复制等

  7. jQuery弹出深色系层菜单

    低调奢华jQuery弹出层菜单,使用新版的jQuery库,兼容多种浏览器.Demo展示: http://hovertree.com/texiao/layer/3/ 本特效可以作为网站的引导页,使用jQ ...

  8. 转:jQuery弹出二级菜单

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  9. 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题

    最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...

随机推荐

  1. web动态站面试题

    1.简述 tomcat 的启动过程? 答:Tomcat 启动--> 读取自己的 server.xml-->根据 Context 标签的内容找到项目目录. 项目入口 path-->读取 ...

  2. 【JAVA基础】JAVA基础语法

    1.1 Java语言概述什么是Java语言Java语言是美国Sun公司(Stanford University Network),在1995年推出的高级的编程语言. Java语言发展历史1995年Su ...

  3. 解决window.onload延迟加载问题

    window.onload方法,表示当页面所有的元素都加载完毕,并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容.这样肯定保证了代码在domReady之后执行.使用w ...

  4. mac安装flask

    1.1使用虚拟环境 输入以下命令可以检查系统是否安装了 virtualenv: $ virtualenv --version 大多数 Linux 发行版都提供了 virtualenv 包.例如,Ubu ...

  5. 学以致用,通过字节码理解:Java的内部类与外部类之私有域访问

    目录: 内部类的定义及用处 打开字节码理解内部类 一.内部类的定义及用处 内部类(inner class)是定义在另一个类中的类.使用内部类,我们可以: 访问该类定义所在的作用域中的数据,包括私有的数 ...

  6. 像智能手机一样管理云端应用:阿里云联合微软全球首发开放应用模型(OAM)

    2019 年 10 月 17 日上午 9 点 15 分,阿里巴巴合伙人.阿里云智能基础产品事业部总经理蒋江伟在 QCon 上海<基于云架构的研发模式演进>主题演讲中,正式宣布: " ...

  7. windows服务隐藏后门之克隆帐号

    windows服务隐藏后门之克隆帐号 1.CMD命令行下,建立了一个用户名为“test$”,密码为“abc123!”的简单隐藏账户,并且把该隐藏账户提升为了管理员权限. PS:CMD命令行使用&quo ...

  8. 流包装器实现WebShell免杀

    说明: 本文首发自 https://www.secpulse.com/archives/73391.html ,转载请注明出处. 前言 本文是看PHP使用流包装器实现WebShell有感,权当做个笔记 ...

  9. UVA10228 A Star not a Tree?

    [返回模拟退火略解] 题目描述 一平面上有 nnn 个点 {Ai}\{A_i\}{Ai​},求一个点 XXX 使得σ=∑i=1ndis(Ai,X)\sigma=\sum_{i=1}^{n}{dis(A ...

  10. [JZOJ5185] 【NOIP2017提高组模拟6.30】tty's sequence

    Description