前言

最近一个需求是弹窗展示列表,显然是需要一个滚动条的,而滚动到底部就会穿透到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. 【易语言学习】Day1

    个人认为网上讲的都不是很好,查阅了各类资料,特意找了份比较不错的PDF版,需要的可以私聊我~~~ 今天就看到这里了,请听下回分解

  2. Gym 100952C&&2015 HIAST Collegiate Programming Contest C. Palindrome Again !!【字符串,模拟】

    C. Palindrome Again !! time limit per test:1 second memory limit per test:64 megabytes input:standar ...

  3. 使用phpMyAdmin批量修改Mysql数据表前缀的方法

    多个网站共用一个Mysql数据库时,为使数据库管理不混乱,一般采用不同的网站使用不同前缀名的方式进行区分.而如何批量修改已有数据库的前缀名呢?全部导出修改后再导入?还是一个表一个表的修改?今天我要介绍 ...

  4. 微信公众号中ip白名单用谁的ip

    https://segmentfault.com/q/1010000010201211 白名单怎么说 我该填写谁的 我的ip地址每天都变化的 服务器ip啊,为了防止未授权的代码盗用你的权限.写你ip是 ...

  5. ::在c++中什么意思

    (1)表示“域操作符” 例:声明了一个类A,类A里声明了一个成员函数void f(),但没有在类的声明里给出f的定义,那么在类外定义f时, 就要写成void A::f(),表示这个f()函数是类A的成 ...

  6. 读书笔记之《Java编程思想》

    17. 容器 Set 存入Set的每个元素都必须是唯一的,因为Set不保存重复元素. Set接口不保证维护元素的次序 Map 映射表(关联数组)的基本思想是维护的是键-值(对)关联,因此可以用键来查找 ...

  7. webpack模块机制浅析【一】

    webpack模块机制浅析[一] 今天看了看webpack打包后的代码,所以就去分析了下代码的运行机制. 下面这段代码是webpack打包后的最基本的形式,可以说是[骨架] (function(roo ...

  8. Nodejs+Grunt配置SASS项目自动编译

    Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开 ...

  9. mybatis-pageHelper做分页

    Mybatis-PageHelpera是一个很好的第三方分页插件,支持很多数据库,几乎主流的数据库都支持 github地址:https://github.com/pagehelper/Mybatis- ...

  10. Runtime.addShutdownHook的用法

    原文出处:http://kim-miao.iteye.com/blog/1662550.感谢作者的无私分享. 一.Runtime.addShutdownHook理解 在看别人的代码时,发现其中有这个方 ...