今天测试的时候遇到一个移动端的bug，为什么说是移动端的呢，因为在谷歌浏览器的移动模式下，这个是不会出现的。先描述具体的情况。一个长页面（肯定是比手机长的页面，所以肯定会滑动），里面有一个按钮，点击按钮的时候，会有一个比屏幕小的弹窗，出现游戏规则。这个游戏规则也是超出这个弹窗的大小的，多以这个弹窗也是会滑动的。

　　真机测试的时候发现，当弹窗滑动到最低端的时候，继续向上滑动，发现底部的body页面也开始向上滑。我已经对body设置了overflow：hidden。但是移动端还是不管用，所以在网上寻找答案。主要是两种解决办法。

　　第一种：

　　就是在弹窗弹起的时候直接把滑动事件touchmove禁止了。但是这样的话，我们的弹窗里面的内容也是不能滑动，这显然是不可以的。所以我们尝试了第二种解决方案。

　　第二种：

　　在弹窗弹起的时候把body的定位改为fixed，然后计算出滚动的距离，最后给body赋值。当弹窗消失的时候，把上面的操作倒过来。下面直接看代码:

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>测试移动端滑动的问题</title>

         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

         <link rel="stylesheet" type="text/css" href="css/cssReset.css" />

         <link rel="stylesheet" type="text/css" href="css/lottery.css" />

         <style type="text/css">

             button{

                 position: fixed;

                 left: 0;

                 top: 100px;

                 width: 100px;

                 height: 40px;

                 line-height: 40px;

                 font-size: 28px;

             }

         </style>

     </head>

     <body>

         <div id="big_box">

             <button>按钮</button>

             <div class="gz-mc" style="display: none;">

                 <div class="gz-nr">

                     <div class="gz-nrgb"><span>X</span></div>

                     <h4>一.玩法说明</h4>

                     <p>目前竞彩足球共有6种玩法，分别是“混投”，“胜平负”，“让球胜平负”，“二选一”，“猜比分”，“总进球”。 竞猜的比赛均优选自各国主流比赛，从相关主流体育媒体网站均可查阅相关赛事。比赛对阵主队在前，客队在后.</p>

                     <p>1.胜平负：竞猜两支球队，在90分钟内(含伤停补时，不含加时)的胜平负结果。 投注选项有3、1、0(胜、平、负) 。</p>

                     <p>2.让球胜平负：竞猜两支球队让球以后，在90分钟内(含伤停补时，不含加时)的胜平负结果。 投注选项有3、1、0(胜、平、负) 。</p>

                     <p>3.比分：竞猜两支球队在90分钟内(含伤停补时，不含加时)的比分。 投注选项有1:0 2:0 3:0等31种选项。</p>

                     <p>4.总进球：竞猜两支球队在90分钟内(含伤停补时，不含加时)的总进球数量。 投注选项有0、1、2、3、4、5、6、7+ 。</p>

                     <p>5.二选一：本功能是结合胜平负和让球胜平负两个玩法的混合过关。将一场比赛的三个选项，简化成两个选项。赛程只取让球值为+1和-1的比赛。 让球值为-1的比赛，【主胜】为胜平负的主胜；【客不败】为让球胜平负的客胜。 让球值为+1的比赛， 【主不败】为让球胜平负的主胜；【客胜】为胜平负的客胜。</p>

                     <p>注：</p>

                     <p>(1)让球：让球值为负数表示主队让客队多少球，正数表示客队让主队多少球，让球值一旦确定就不再调整。</p>

                     <p>例如：皇马-1 VS巴萨，表示皇马让1球，皇马以1球以上战胜巴萨时，赛果为3。皇马以1球战胜巴萨时，赛果为1。当皇马负、打平巴萨时，赛果为0。</p>

                     <h4>二.过关方式</h4>

                     <p>1.玩家选择1种投注结果的为单式投注；选择2种或2种以上投注结果的为复式投注。</p>

                     <p>2.玩家选择1场比赛进行投注的为单场投注；选择2场或2场以上比赛进行串联投注的为过关投注。在过关投注中，所选比赛的结果全部竞猜正确才能中奖。 </p>

                     <h4>三.奖金计算</h4>

                     <p>1.竞彩足球的过关投注奖金会根据投注等情况进行实时的调整；投注方案的中奖金额以完成投注最终出票时刻的奖金为准，不受投注完成后奖金调整的影响。 投注页面的奖金赔率也仅供参考。</p>

                     <p>2.单张彩票的中奖奖金=单注奖金*倍数；单注奖金=投注基数*所选比赛的奖金赔率连乘。目前投注基数为20000金币.</p>

                     <p>例如：用户投注2场比赛2串1过关并且中奖，出票时的奖金赔率分别是1.68和3.95，倍数为100倍，单注奖金=20000金币x1.68x3.95=132720金币,方案总奖金=132720x100倍=132072000金币</p>

                     <p>3.串联过关最高奖金限制</p>

                     <p>单张彩票最高限额：</p>

                     <p>（1）选择2-3场过关投注的，单张最高奖金限额40000万金币；</p>

                     <p>（2）选择4-5场过关投注的，单张最高奖金限额60000万金币；</p>

                     <p>（3）选择6-8场过关投注的，单张最高奖金限额80000万金币。</p>

                     <h4>四.延期、中断、取消的比赛，如何算奖？</h4>

                     <p>1.延期比赛如何处理：</p>

                     <p>推迟时间未超过36小时，则正常算奖；</p>

                     <p>推迟时间超过36小时或无法确定时间，则该场为无效场次，按比赛取消算奖；</p>

                     <p>取消赛事算奖：单关固定玩法返还投注金额，过关投注该场赔率值按1.0计算奖金；</p>

                     <p>2.中断比赛如何处理：</p>

                     <p>36小时内继续完成比赛则正常算奖；</p>

                     <p>36小时内未完成比赛则该场为无效场次，按比赛取消算奖；</p>

                     <p>3.取消赛事算奖：单关固定玩法返还投注金额，过关投注该场赔率值按1.0计算奖金；</p>

                     <h4>五．截止投注时间、开奖时间</h4>

                     <p>截止投注时间为比赛正式开始前5分钟，单式投注的开奖时间为比赛结束后，复式投注的开奖时间为所选所有比赛结束后。</p>

                     <p>注：可根据投注额、突发事件等因素，拒绝某些大额投注、暂停或提前截止针对该场比赛的所有投注。</p>

                 </div>

             </div>

         </div>

     </body>

     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

     <script type="text/javascript">

         for(var i = 0; i < 100; i++) {

             $("#big_box").append("<p>这是第" + i + "条数据</p>");

         }

         $("button").click(function() {

             $(".gz-mc").show();

             $("body").css({

                 "overflow": "hidden"

             });

             //$('body').on('touchmove', preventDefaultFn);

             stopScrollLong();

         })

         $(".gz-nrgb span").click(function(){

             $(".gz-mc").hide();

             $("body").css({

                 "overflow": "auto"

             });

             recoverScrollLong();

         })

         function stopScrollLong() {

             var top = -$(window).scrollTop();

             $('body').css({

                 'position': 'fixed'

             })

             setTimeout(function() {

                 $('body').css({

                     'top': top + 'px'

                 })

             }, 10)

         }

         function recoverScrollLong() {

             var top = parseInt(-$('body').css('top').replace('px', ''));

             $('body').css({

                 position: 'static'

             })

             $(window).scrollTop(top);

         }

     </script>

 </html>

突然发现少了两个css文件，这两个里面一个是清楚css默认格式的，一个是给弹窗鞋写样式的。你们可以自己写，没有什么问题。这里也附上百度的网盘链接，请点这里。密码：kiwk

　　这个时候就能达到我们想要的效果了。简单的记录一下

弹窗滑动，造成body跟随滑动解决办法的更多相关文章

  1. webview滑动事件 与内部html左右滑动事件冲突问题的解决办法

    最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...

  2. iOS9TableView分割线默认不显示，只有滑动的时候才显示 解决办法

    只有iOS9和iPhone6 plus模拟器上TableView分割线不会显示,后来终于找到了原因: 由于iPhone6 plus的分辨率较高,开发的时候同常都使用command + 3 或者 com ...

  3. phpstorm 输入法中文不同步 phpstorm 输入法不跟随光标解决办法

    win7系统新安装的phpstorm2017.2版本,试了很多输入法,要么是不显示候选次,要么是输入法候选词总是在屏幕右下角,没有跟随光标移动.百度很久,重要找到解决方案. 就是替换phpstorm安 ...

  4. jeecg3.8popup弹出窗口触发失去焦点事件，引发验证弹窗，影响体验问题的解决办法

    在初始化表单的代码中添加以下加粗部分,有几个popup就定义几个标志位,主要是防止第一次失去焦点时候的弹窗(此时还未来得及选择),提交表单的时候还是会正常校验的. //popup触发失去焦点事件,设置 ...

  5. bootstrap大图轮播手机端不能手指滑动解决办法

    网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...

  6. ios下元素溢出设置 overflow:auto; 不能滑动解决办法

    ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...

  7. iphone 在设置了initial-scale=1 之后，在设置滚动条之后，没有滑动效果的解决办法

    iphone在设置了initial-scale=1 之后,我们终于可以以1:1 的比例进行页面设计了. 关于viewport,还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条 ...

  8. cocos2d Slider 透明滑动部件无法生成解决办法

    用cocos studio 2.3.2 制作声音大小控制滑条的时候遇到了一个奇葩bug我把透明图片和其它资源打包到合图里面然后到到cocos stdudio里面 那张透明图片变成了只有一个像素的点,最 ...

  9. UIScrollView的左右滑动和侧滑手势冲突的解决办法

    转载自:https://blog.csdn.net/kst_123/article/details/77762811 当ViewController中添加了一个全屏的UIScrollView的时候,U ...

随机推荐

  1. 神经网络_线性神经网络 3 (Nerual Network_Linear Nerual Network 3)

    1 LMS 学习规则_解方程组 1.1 LMS学习规则举例 X1=[0 0 1]T,t1=0:X2=[1 0 1]T,t2=0:X3=[0 1 1]T,t3=0:X1=[1 1 1]T,t1=1. 设 ...

  2. HTML5 部分新增语义化标签元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. OJ001

    #include<stdio.h> int main(){ int a,b; while (scanf("%d%d",&a,&b)!=EOF){ pri ...

  4. jsp EL表达式原样输出问题

    jsp原样输出,比如${message},输出也是${message}. 需要在<%@ page......%>里面添加isELIgnored="false". 参考: ...

  5. H5 和移动端 WebView 缓存机制解析与实战

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qHm_dJBhVbv0pJs8Crp77w 作者:叶 ...

  6. Python必学Django框架，入门到精通学习视频教程全都在这可以领

    “人生苦短,我用python”,学python的小伙伴应该都了解这句话的含义.但是,学python,你真正了了解强大的Django框架吗!? 据说Django还是由吉普赛的一个吉他手的名字命名的呢,有 ...

  7. 一个完整的 Web 请求到底发生了什么

    阅读本文大概需要 7 分钟. 一.从输入一个网址开始 当我们在浏览器输入一个网址,然后按下回车,接下来浏览器显示了页面.网速好的话这之间可能就一秒,但在这一秒内到底发生了什么? 本文主要内容是试图记录 ...

  8. [Swift]LeetCode158. 用Read4来读取N个字符II $ Read N Characters Given Read4 II

    The API: int read4(char *buf) reads 4 characters at a time from a file. The return value is the actu ...

  9. [Swift]LeetCode869. 重新排序得到 2 的幂 | Reordered Power of 2

    Starting with a positive integer N, we reorder the digits in any order (including the original order ...

  10. 手把手的教你激活PyCharm --Pycharm激活详细教程（二）（非常详细，非常实用）

    简介 Pycharm安装以后必须激活后,才能正常的使用.否则就不能使用. 激活PyCharm 1.Activation code激活 优点:Window.Mac.Ubantu都稳定有效,关键是这种激活 ...