前言

最近一个需求是弹窗展示列表,显然是需要一个滚动条的,而滚动到底部就会穿透到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. linux(二)之linux常用命令一

    linux的命令非常之多,命令多就算了关键每个命令还有很多的参数.不过其实并不要去害怕它.你只要常去用,并且的话,大部分你只要记住命令,参数不记得我们可以去查帮助文档.加油吧!老帖们. 一.登入\登出 ...

  2. POJ 1321 棋盘问题(DFS板子题,简单搜索练习)

    棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 44012   Accepted: 21375 Descriptio ...

  3. [51nod1299]监狱逃离

    到现在还是不会写系列,直接贴题解了. http://www.51nod.com/question/index.html#!questionId=1157 #include<cstdio> ...

  4. 三维dp&codeforce 369_2_C

    三维dp&codeforce 369_2_C 标签: dp codeforce 369_2_C 题意: 一排树,初始的时候有的有颜色,有的没有颜色,现在给没有颜色的树染色,给出n课树,用m种燃 ...

  5. powerdesign

  6. MongoDB模拟多文档事务操作

    Mongodb不支持多文档原子性操作,因此依据两阶段提交协议(Two Phase Commits protocol)来模拟事务. 以两个银行账户之间的转账行为为例,来说明如何实现多文档间的事务操作. ...

  7. Git分支管理及常见操作

    众所周知,使用Git分支,我们可以从开发主线上分离开来,然后在不影响主线的同时继续工作. 既然要使用Git分支,这里就涉及到Git分支的管理及常见操作,如列出分支,分支的创建,分支的删除,分支的合并等 ...

  8. Oracle_复杂查询综合

    Oracle_复杂查询综合 -- 1.列出所有员工的年工资,按年薪从低到高排序. select,) income from emp order by income;   -- 2.列出薪金比" ...

  9. 通过Xshell如何从Linux服务器下载文件(亲测可行)

    到网上下载lrzsz安装包,这里以lrzsz-0.12.20.tar.gz为例 2 打开终端 cd 到安装包所在目录 tar zxvf lrzsz-0.12.20.tar.gz 解压安装包 3 进入解 ...

  10. 无格式转换php

    // 无格式转换function ClearHtml($content,$allowtags='') { mb_regex_encoding('UTF-8'); //replace MS specia ...