今天测试的时候遇到一个移动端的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. Content-Type: application/www-form-urlencoded

    默认的方式 1.Content-Type: application/www-form-urlencoded id=3&fgf=56&908rr=767 2.Content-Type:a ...

  2. return和throw某些特性相似

    拷贝构造函数的调用拷贝构造函数会在以下三中情况下被调用(1)当类的一个对象去初始化该类的另一个对象时 int main(){ Point a(1,2); Point b(a);//用对象a初始化对象b ...

  3. .net core2.1 使用 dynamic 类型报错

    在net core2.0项目中使用 dynamic 无法编译通过 异常信息:缺少编译器要求的成员"Microsoft.CSharp.RuntimeBinder.CSharpArgumentI ...

  4. emWin表盘界面设计，含uCOS-III和FreeRTOS两个版本

    第4期:简易表盘界面设计 配套例子:V6-906_STemWin提高篇实验_简易表盘界面设计(uCOS-III)V6-907_STemWin提高篇实验_简易表盘界面设计(FreeRTOS) 例程下载地 ...

  5. 七种经典排序算法及Java实现

    排序算法稳定性表示两个值相同的元素在排序前后是否有位置变化.如果前后位置变化,则排序算法是不稳定的,否则是稳定的.稳定性的定义符合常理,两个值相同的元素无需再次交换位置,交换位置是做了一次无用功. 下 ...

  6. 使用MUI的日期控件引起的探索——HTML5 input类型date属性

    我写移动端的页面会用到MUI这个框架,个人觉得挺好用的,有很多实用的UI组件.当然坑还是有的,http://dev.dcloud.net.cn/mui/ui/ MUI官网,有兴趣的小伙伴可以看看 虽然 ...

  7. [Swift]LeetCode689. 三个无重叠子数组的最大和 | Maximum Sum of 3 Non-Overlapping Subarrays

    In a given array nums of positive integers, find three non-overlapping subarrays with maximum sum. E ...

  8. WebSocket(3)---实现一对一聊天功能

    实现一对一聊天功能 功能介绍:实现A和B单独聊天功能,即A发消息给B只能B接收,同样B向A发消息只能A接收. 本篇博客是在上一遍基础上搭建,上一篇博客地址:[WebSocket]---实现游戏公告功能 ...

  9. 『最长等差数列 线性DP』

    最长等差数列(51nod 1055) Description N个不同的正整数,找出由这些数组成的最长的等差数列. 例如:1 3 5 6 8 9 10 12 13 14 等差子数列包括(仅包括两项的不 ...

  10. Lucene 06 - 使用Lucene的Query API查询数据

    目录 1 Query对象的创建(方式一): 使用子类对象 1.1 常用的Query子类对象 1.2 常用的Query子类对象使用 1.2.1 使用TermQuery 1.2.2 使用NumericRa ...