前言

最近一个需求是弹窗展示列表,显然是需要一个滚动条的,而滚动到底部就会穿透到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滚动的更多相关文章

  1. vue 弹窗禁止底层滚动

    原因:底层视图高度超出百分百,加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层. 处理:打开弹窗后禁止底层滚动调用stop事件,关闭则开启底层滚动调用move事件. let mo=fun ...

  2. 跳出弹窗页面禁止滚动(PC端和手机端)

    pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可2.在弹窗的div上设置 @scroll.stop.prevent 3.前端页面弹 ...

  3. 移动端vue页面禁止移动/滚动

    当需要在移动端中禁止页面滚动,加入:@touchmove.prevent即可,例子如下 <template> <div @touchmove.prevent> <h3 c ...

  4. 关于移动端弹层下的body滚动

    关于移动端弹层下的body滚动 这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦) ps: 本文的例子都是用vu ...

  5. jquery 禁止滚动条滚动,并且滚动条不消失,页面大小不闪动

    一,禁止滚动,滚动条不消失,页面大小不闪动 //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document) ...

  6. js禁止滚动条滚动,并且滚动条不消失,页面大小不变

    //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',fu ...

  7. 原生js禁止页面滚动

    // 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处 ...

  8. js点击左右滚动+默认自动滚动类

    js点击左右滚动+默认自动滚动类 点击下载

  9. IOS苹果手机上 iframe 滚动失效条问题,局部滚动开启弹性滚动!

    html:bo<div class="scroll-wrapper"> <iframe src=""></iframe> & ...

随机推荐

  1. [翻译].NET Shell Extensions - Shell Context Menus---.net 外壳扩展-右键菜单

    我自己的前言说明: 本文原作者为    Dave Kerr,原文链接为.NET Shell Extensions - Shell Context Menus:,我是在为了完成最新需求的时候查询资料的时 ...

  2. 【经验分享】Hydra(爆破神器)使用方法

    这个也是backtrack下面很受欢迎的一个工具 参数详解:-R 根据上一次进度继续破解-S 使用SSL协议连接-s 指定端口-l 指定用户名-L 指定用户名字典(文件)-p 指定密码破解-P 指定密 ...

  3. hackerrank DFS Edges

    瞬间移动 题意:要求构造一个图,使其dfs树中有t条树边,b条返祖边,f条前向边,c条其他边. 膜了题解才会,好神啊. 考虑所有结点的深度之和,这个值必须介于$[max(b,f+t),C^{2}_{n ...

  4. [bzoj1774] [Usaco2009 Dec]Toll 过路费

    Floyd神用法...设dis[i][j]表示i点到j点的最短路(只算边权),map[i][j]表示i到j最小费用 将n个点先按照点权排一下序...这样就可以比较方便的求出路径上最大点权了... 因为 ...

  5. HDU2289-Cup-二分

    Cup Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  6. UVA 572 dfs求连通块

    The GeoSurvComp geologic survey company is responsible for detecting underground oil deposits. GeoSu ...

  7. 【自制工具类】Java删除字符串中的元素

    这几天做项目需要把多个item的id存储到一个字符串中,保存进数据库.保存倒是简单,只需要判断之前是否为空,如果空就直接添加,非空则拼接个"," 所以这个字符串的数据结构是这样的 ...

  8. 十二个 ASP.NET Core 例子——IOC

    目录 简单介绍 core自带IOC的实现解释 1.简单介绍 (个人理解) 是什么:IOC是一种设计原则,而非设计模式,是对流程控制,当你注入你需要的定制化类时,流程就确定了 怎么用:和IOC容器说你这 ...

  9. php-cli和php-fpm的关系是什么?

    CLI是命令行版本.FPM是作为Apache或者Nginx等服务器软件处理PHP文件的扩展. PHP的默认版本是不支持线程安全的,这个线程安全问题可以去了解PHP扩展开发方面的相关知识,这是因为C语言 ...

  10. 邓_laravel框架——news

    ----------------------------------------------------------------------------------- [laravel框架] 路由+中 ...