移动端的弹窗滚动禁止body滚动
前言
最近一个需求是弹窗展示列表,显然是需要一个滚动条的,而滚动到底部就会穿透到body滚动,而阻止默认行为是不行的,这样两个都滑动不了
所以我在点击出现弹窗的时候在body加了以下css让它没有滚动效果
$("body").css({
overflow:"hidden",
height:"100%"
});
但是这样又出来一个问题,会在弹窗出来的时候body直接回到顶部,显然不是我愿意要的,所以这时候就需要让body显示在之前的高度,所以我们可以获取点击时body被卷去的高度bodyScroll=$("body").scrollTop();并且给body定位,就可以实现我们所需要的了
var bodyScroll=$("body").scrollTop();
$("body").css({
overflow:"hidden",
position:'fixed',
top:-bodyScroll
});
关闭弹窗的时候在恢复之前的就可以了,并且滚动到原先的位置
$("body").css({
'overflow':'auto',
'position': 'static',
'top': 'auto'
});
$("body").scrollTop(bodyScroll);
在安卓和苹果经过测试没有出什么bug,希望也可以解决你们的问题。
移动端的弹窗滚动禁止body滚动的更多相关文章
- vue 弹窗禁止底层滚动
原因:底层视图高度超出百分百,加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层. 处理:打开弹窗后禁止底层滚动调用stop事件,关闭则开启底层滚动调用move事件. let mo=fun ...
- 跳出弹窗页面禁止滚动(PC端和手机端)
pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可2.在弹窗的div上设置 @scroll.stop.prevent 3.前端页面弹 ...
- 移动端vue页面禁止移动/滚动
当需要在移动端中禁止页面滚动,加入:@touchmove.prevent即可,例子如下 <template> <div @touchmove.prevent> <h3 c ...
- 关于移动端弹层下的body滚动
关于移动端弹层下的body滚动 这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦) ps: 本文的例子都是用vu ...
- jquery 禁止滚动条滚动,并且滚动条不消失,页面大小不闪动
一,禁止滚动,滚动条不消失,页面大小不闪动 //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document) ...
- js禁止滚动条滚动,并且滚动条不消失,页面大小不变
//禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',fu ...
- 原生js禁止页面滚动
// 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处 ...
- js点击左右滚动+默认自动滚动类
js点击左右滚动+默认自动滚动类 点击下载
- IOS苹果手机上 iframe 滚动失效条问题,局部滚动开启弹性滚动!
html:bo<div class="scroll-wrapper"> <iframe src=""></iframe> & ...
随机推荐
- CTF---密码学入门第一题 这里没有key
这里没有key分值:10 来源: 西普学院 难度:易 参与人数:5577人 Get Flag:1965人 答题人数:2074人 解题通过率:95% 你说没有就没有啊,俺为啥要听你的啊 解题链接: ht ...
- [bzoj1999]树网的核
从下午坑到网上..noip的数据太弱,若干的地方写挂结果还随便过= = 最坑的就是网上有些题解没考虑周全... 第一步是找直径,用两次bfs(或者dfs,Linux下系统栈挺大的..)解决.找出其中一 ...
- opencv+vs配环境
首先,一定要注意debug和release下配的项目设置是有区分的!!!!!!!!!!! 1.注意自己的电脑是64位还是32位 2.要在环境变量中设置环境变量,环境变量从前向后扫描,用64位环境变量时 ...
- zookeeper的安装以及启动jps进程
2.7.1安装 将下载好的安装包,解压到指定位置,这里为直接解压到当前位置,命令如下: tar -zxvf zk-{version}.tar.gz 修改zk配置,将zk安装目录下conf/zoo_sa ...
- 部署Asp.net Core 项目发生502.5 或者500 没有其他提示信息
最近将公司原来.NetCore 1.6的项目升级到.net Core 2.0首先发生 502.5的错误,包括IIS日志,Windows应用程序日志都没有记录问题始终解决不了,首先看看官网给出的解决方案 ...
- [国嵌攻略][047][MMU功能解析]
MMU功能解析 1.Memory Management Unit(存储器管理单元) 2.两个进程读取同一个地址能读到不同的值.因为进程访问的是虚拟地址,通过MMU转换成不同的物理地址.不同的进程通过M ...
- visual studio 打开微软MVC3示例MvcMusicStore的详细修改方法
1.官方下载地址:http://mvcmusicstore.codeplex.com/ 2.直接打开项目后,引用中会有三个dll文件报错,分别是System.Web.MVC;System.Web.He ...
- Unity 小笔记
1,Time.deltatime放在Update和fixedupdate中得到的值是不一样的.还以为是通过两个值来获取. 2,VR中绘制射线可以使用LineRender. 3,Unity中判断一个东西 ...
- 一篇文章让你深透理解cookie和session,附带分布式WEB系统redis共享session方案
cookie和session有什么区别?这是一个很基础的知识点,大家可能都知道一个大概:cookie是存在客户端的,session是存储在服务端,cookie和session用来验证识别用户的登录状态 ...
- PostgreSQL9.6.2的WINDOWS下安装
下载链接:https://www.enterprisedb.com/downloads/postgres-postgresql-downloads#windows 安装链接:http://www.cn ...