移动端的弹窗滚动禁止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> & ...
随机推荐
- OllyDBG 破解入门教程
一.OllyDBG 的安装与配置OllyDBG 版的发布版本是个 ZIP 压缩包,只要解压到一个目录下,运行 OllyDBG.exe 就可以了.汉化版的发布版本是个 RAR 压缩包,同样只需解压到一 ...
- vijos 1213:80人环游世界
描述 想必大家都看过成龙大哥的<80天环游世界>,里面的紧张刺激的打斗场面一定给你留下了深刻的印象.现在就有这么一个80人的团伙,也想来一次环游世界. 他们打算兵分多路,游遍每一个国家. ...
- UESTC 1591 An easy problem A【线段树点更新裸题】
An easy problem A Time Limit: 2000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others ...
- UVA 11039-Building designing【贪心+绝对值排序】
UVA11039-Building designing Time limit: 3.000 seconds An architect wants to design a very high build ...
- BZOJ 3097: Hash Killer I【构造题,思维题】
3097: Hash Killer I Time Limit: 5 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 963 Solved: 36 ...
- Codeforces780C
题解:n个气球 从1到n染色,如果a.b和c是不同的正方形,a和b在它们之间有一条直接的路径,b和c之间有一条直接的路径,然后在这三个方块上的气球颜色是不同的. AC代码 #include <s ...
- 【笔记】nodejs读取JSON,数组转树
const fs = require('fs'); // --------------- 读取源文件 --------------- const originData = require('./vux ...
- 蓝桥杯 0/1背包问题 (java)
今天第一次接触了0/1背包问题,总结一下,方便以后修改.不对的地方还请大家不啬赐教! 上一个蓝桥杯的例题: 数据规模和约定 代码: import java.util.Scanner; public ...
- 20170723-Ioc与AOP
Ioc与AOP 功能.语法.分类.原理.例子.补充(AOP-Ioc-DI) 1.AOP: ①功能体现:是拦截,过滤器: ②相关语法:借助特性语法作为切入点: ③实现方式分类:动态代理+静态织入: ④实 ...
- 浅谈event.client、event.screen与event.offset
每每看到event.client.event.screen与event.offset这几个,头都大了,今天又碰到了,特来总结下. 1.event.screenX与event.screenY. 首先,e ...