前言

最近一个需求是弹窗展示列表,显然是需要一个滚动条的,而滚动到底部就会穿透到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. C/C++中__builtin_popcount()的使用及原理

    __builtin_popcount()用于计算一个 32 位无符号整数有多少个位为1 Counting out the bits     可以很容易的判断一个数是不是2的幂次:清除最低的1位(见上面 ...

  2. hdu_1028_母函数

    虽然我很想自己写母函数讲解...但是最近事情太多了,就贴个很入门的讲解吧给出一个经典的模板A了这个题 http://blog.csdn.net/vsooda/article/details/79754 ...

  3. c语言基础学习02

    =============================================================================涉及到的知识点有:include有两种用法.{ ...

  4. c++(单向链表)

    有的时候,处于内存中的数据并不是连续的.那么这时候,我们就需要在数据结构中添加一个属性,这个属性会记录下面一个数据的地址.有了这个地址之后,所有的数据就像一条链子一样串起来了,那么这个地址属性就起到了 ...

  5. Servlet面试题归纳

    尊重原创:http://blog.csdn.net/caohaicheng/article/details/38116481 1.说一说Servlet生命周期 Servlet生命周期包括三部分: 初始 ...

  6. IDEA的破解安装以及汉化

    IDEA是一款比eclipse用起来更好用的一款代码编辑器,本人之前也是一直在用eclipse来写代码,后来发现了IDEA用起来会更顺手,所以又转用IDEA了,今天给大家分享一下IDEA的下载安装破解 ...

  7. Fiddler显示服务器IP的方法

    Fiddler默认配置中是看不到服务器IP的,接下来简单介绍下在fiddler上也能够看到请求的服务器IP: 1.Fiddler--->Rules--->Customize Rules , ...

  8. YUI 的模块信息配置优先级关系梳理

    背景 YUI的配置参数较多, 可以在好几个地方配置一个module的相关信息, 如: //在全局配置, 所以YUI实例共享 YUI_config = { modules: { 'w-autcomple ...

  9. 关于STM32驱动DS1302实时时钟的一点思考

    之前用51驱动过DS1302,没用多久就输出了正确的时间.当时以为这块芯片其实没啥,很简单.但是现在用STM32做项目,用到同样的芯片,以为这有何难,只要把那个程序拿过来复制黏贴改一下IO设置不就行了 ...

  10. syntax error, unexpected '['

    在用ThinkPHP框架做了个小的应用 我在本地搭建的服务器,进行测试好着的. 但是放到别的地方后,出现以下报错 syntax error, unexpected '[' 错误位置是在我自己写的一个A ...