移动端的弹窗滚动禁止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> & ...
随机推荐
- Codeforces Round #423 (Div. 2, rated, based on VK Cup Finals)爆零记
昨晚一个瓜皮说今晚有cf,听说是晚间场,我瞅了一眼,娃,VK Cup,上分的好机会,看着比赛时间就有点心酸了,0:35,当时一直在纠结要不要打的问题,当时想着应该不难吧,要不打一下吧,要不还是看看题先 ...
- Gym101473A Gym101473E Gym101473F-前缀和
代码: #include<iostream> #include<cstring> #include<cstdio> #include<cmath> #i ...
- CodeForces801-A.Vicious Keyboard-暴力
A. Vicious Keyboard time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- 对于hive使用的一点记录
最近一段时间因工作需要接触了一些hive上的使用!当然大部分都是比较基本的使用,仅当入门!各位看到有不足之处望多多指正! 废话不多说,开始: 首先是创建数据库 create database '数据库 ...
- 全国银行列表json格式
var list=[ { value:'CDB', text:'国家开发银行' }, { value:'ICBC', text:'中国工商银行' }, { value:'ABC', text:'中国农 ...
- ios - 如何获取app上的数据
做过ios开发的人应该都用过Charles,通常叫它花瓶.Charles是Mac下常用的对网络流量进行分析的工具,类似于Windows下的Fiddler.在开发iOS程序的时候,往往需要调试客户端和服 ...
- ZooKeeper集群的安装、配置、高可用测试
Dubbo注册中心集群Zookeeper-3.4.6 Dubbo建议使用Zookeeper作为服务的注册中心. Zookeeper集群中只要有过半的节点是正常的情况下,那么整个集群对外就是可用的.正是 ...
- MySql优化子查询
用子查询语句来影响子查询中产生结果rows的数量和顺序. For example: SELECT * FROM t1 WHERE t1.column1 IN (SELECT column1 FROM ...
- 怎样用PS对照片进行美白?
摘录自:http://product.pconline.com.cn/itbk/software/ps/1408/5336118.html 步骤1.打开需要美白肤色的照片.本教程为防止侵犯他人肖像权, ...
- Oracle问题之ORA-01609、ORA-00362
Oracle问题之ORA-01609: 日志 4 是线程 1 的当前日志 - 无法删除成员 Oracle问题之ORA-00362: 要求输入成员以组成组 4 中的有效日志文件