JQuery弹出菜单时禁止页面(body)滚动
最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下:
方法一:弹出菜单时给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)滚动的更多相关文章
- 解决Mui中popover 顶部弹出菜单弹出位置不准确以及无法收回的问题
前言 最近公司的项目转向使用Hbuilder开发移动端项目,其中想要通过在顶部标题栏加入弹出菜单的方式,来定位长列表的位置,如图所示. 问题 Mui的功能貌似还不是很完善,在使用这个弹出菜单的时候,发 ...
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
- selenium定位弹出菜单
写selenium脚本,在浏览器定位各种弹出菜单时,有时用工具很难去取菜单的属性,下面说下如何去取: 点开firebug ,切换到“脚本”界面,首先在输入框输入单字母s,待弹出下拉列表后,单击左侧的插 ...
- iOS_21团购_顶部菜单和弹出菜单联动
最后效果图: 各控件关系图1: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize ...
- 向上弹出菜单jQuery插件
插件名:柯乐义英文名:Keleyijs文件名称:jquery.keleyi.js插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单. 示例查看:http://keleyi.com/kel ...
- iOS如何禁用长按页面弹出菜单
iOS如何禁止用户长按页面导致弹出菜单? 给元素设置样式: -webkit-touch-callout:none; 补充:同样适用于图片如果想禁止用户保存或者复制等
- jQuery弹出深色系层菜单
低调奢华jQuery弹出层菜单,使用新版的jQuery库,兼容多种浏览器.Demo展示: http://hovertree.com/texiao/layer/3/ 本特效可以作为网站的引导页,使用jQ ...
- 转:jQuery弹出二级菜单
<html> <head> <meta http-equiv="content-type" content="text/html; char ...
- 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题
最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...
随机推荐
- web动态站面试题
1.简述 tomcat 的启动过程? 答:Tomcat 启动--> 读取自己的 server.xml-->根据 Context 标签的内容找到项目目录. 项目入口 path-->读取 ...
- 【JAVA基础】JAVA基础语法
1.1 Java语言概述什么是Java语言Java语言是美国Sun公司(Stanford University Network),在1995年推出的高级的编程语言. Java语言发展历史1995年Su ...
- 解决window.onload延迟加载问题
window.onload方法,表示当页面所有的元素都加载完毕,并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容.这样肯定保证了代码在domReady之后执行.使用w ...
- mac安装flask
1.1使用虚拟环境 输入以下命令可以检查系统是否安装了 virtualenv: $ virtualenv --version 大多数 Linux 发行版都提供了 virtualenv 包.例如,Ubu ...
- 学以致用,通过字节码理解:Java的内部类与外部类之私有域访问
目录: 内部类的定义及用处 打开字节码理解内部类 一.内部类的定义及用处 内部类(inner class)是定义在另一个类中的类.使用内部类,我们可以: 访问该类定义所在的作用域中的数据,包括私有的数 ...
- 像智能手机一样管理云端应用:阿里云联合微软全球首发开放应用模型(OAM)
2019 年 10 月 17 日上午 9 点 15 分,阿里巴巴合伙人.阿里云智能基础产品事业部总经理蒋江伟在 QCon 上海<基于云架构的研发模式演进>主题演讲中,正式宣布: " ...
- windows服务隐藏后门之克隆帐号
windows服务隐藏后门之克隆帐号 1.CMD命令行下,建立了一个用户名为“test$”,密码为“abc123!”的简单隐藏账户,并且把该隐藏账户提升为了管理员权限. PS:CMD命令行使用&quo ...
- 流包装器实现WebShell免杀
说明: 本文首发自 https://www.secpulse.com/archives/73391.html ,转载请注明出处. 前言 本文是看PHP使用流包装器实现WebShell有感,权当做个笔记 ...
- UVA10228 A Star not a Tree?
[返回模拟退火略解] 题目描述 一平面上有 nnn 个点 {Ai}\{A_i\}{Ai},求一个点 XXX 使得σ=∑i=1ndis(Ai,X)\sigma=\sum_{i=1}^{n}{dis(A ...
- [JZOJ5185] 【NOIP2017提高组模拟6.30】tty's sequence
Description