弹窗滑动，造成body跟随滑动解决办法
今天测试的时候遇到一个移动端的bug，为什么说是移动端的呢，因为在谷歌浏览器的移动模式下，这个是不会出现的。先描述具体的情况。一个长页面（肯定是比手机长的页面，所以肯定会滑动），里面有一个按钮，点击按钮的时候，会有一个比屏幕小的弹窗，出现游戏规则。这个游戏规则也是超出这个弹窗的大小的，多以这个弹窗也是会滑动的。
真机测试的时候发现，当弹窗滑动到最低端的时候，继续向上滑动，发现底部的body页面也开始向上滑。我已经对body设置了overflow：hidden。但是移动端还是不管用，所以在网上寻找答案。主要是两种解决办法。
第一种：
就是在弹窗弹起的时候直接把滑动事件touchmove禁止了。但是这样的话，我们的弹窗里面的内容也是不能滑动，这显然是不可以的。所以我们尝试了第二种解决方案。
第二种：
在弹窗弹起的时候把body的定位改为fixed，然后计算出滚动的距离，最后给body赋值。当弹窗消失的时候，把上面的操作倒过来。下面直接看代码:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>测试移动端滑动的问题</title> 7 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 8 <link rel="stylesheet" type="text/css" href="css/cssReset.css" /> 9 <link rel="stylesheet" type="text/css" href="css/lottery.css" /> 10 <style type="text/css"> 11 button{ 12 position: fixed; 13 left: 0; 14 top: 100px; 15 width: 100px; 16 height: 40px; 17 line-height: 40px; 18 font-size: 28px; 19 } 20 </style> 21 </head> 22 23 <body> 24 <div id="big_box"> 25 <button>按钮</button> 26 <div class="gz-mc" style="display: none;"> 27 <div class="gz-nr"> 28 <div class="gz-nrgb"><span>X</span></div> 29 <h4>一.玩法说明</h4> 30 <p>目前竞彩足球共有6种玩法，分别是“混投”，“胜平负”，“让球胜平负”，“二选一”，“猜比分”，“总进球”。 竞猜的比赛均优选自各国主流比赛，从相关主流体育媒体网站均可查阅相关赛事。比赛对阵主队在前，客队在后.</p> 31 32 <p>1.胜平负：竞猜两支球队，在90分钟内(含伤停补时，不含加时)的胜平负结果。 投注选项有3、1、0(胜、平、负) 。</p> 33 34 <p>2.让球胜平负：竞猜两支球队让球以后，在90分钟内(含伤停补时，不含加时)的胜平负结果。 投注选项有3、1、0(胜、平、负) 。</p> 35 36 <p>3.比分：竞猜两支球队在90分钟内(含伤停补时，不含加时)的比分。 投注选项有1:0 2:0 3:0等31种选项。</p> 37 38 <p>4.总进球：竞猜两支球队在90分钟内(含伤停补时，不含加时)的总进球数量。 投注选项有0、1、2、3、4、5、6、7+ 。</p> 39 40 <p>5.二选一：本功能是结合胜平负和让球胜平负两个玩法的混合过关。将一场比赛的三个选项，简化成两个选项。赛程只取让球值为+1和-1的比赛。 让球值为-1的比赛，【主胜】为胜平负的主胜；【客不败】为让球胜平负的客胜。 让球值为+1的比赛， 【主不败】为让球胜平负的主胜；【客胜】为胜平负的客胜。</p> 41 42 <p>注：</p> 43 <p>(1)让球：让球值为负数表示主队让客队多少球，正数表示客队让主队多少球，让球值一旦确定就不再调整。</p> 44 45 <p>例如：皇马-1 VS巴萨，表示皇马让1球，皇马以1球以上战胜巴萨时，赛果为3。皇马以1球战胜巴萨时，赛果为1。当皇马负、打平巴萨时，赛果为0。</p> 46 47 <h4>二.过关方式</h4> 48 49 <p>1.玩家选择1种投注结果的为单式投注；选择2种或2种以上投注结果的为复式投注。</p> 50 51 <p>2.玩家选择1场比赛进行投注的为单场投注；选择2场或2场以上比赛进行串联投注的为过关投注。在过关投注中，所选比赛的结果全部竞猜正确才能中奖。 </p> 52 <h4>三.奖金计算</h4> 53 54 <p>1.竞彩足球的过关投注奖金会根据投注等情况进行实时的调整；投注方案的中奖金额以完成投注最终出票时刻的奖金为准，不受投注完成后奖金调整的影响。 投注页面的奖金赔率也仅供参考。</p> 55 56 <p>2.单张彩票的中奖奖金=单注奖金*倍数；单注奖金=投注基数*所选比赛的奖金赔率连乘。目前投注基数为20000金币.</p> 57 58 <p>例如：用户投注2场比赛2串1过关并且中奖，出票时的奖金赔率分别是1.68和3.95，倍数为100倍，单注奖金=20000金币x1.68x3.95=132720金币,方案总奖金=132720x100倍=132072000金币</p> 59 60 <p>3.串联过关最高奖金限制</p> 61 <p>单张彩票最高限额：</p> 62 <p>（1）选择2-3场过关投注的，单张最高奖金限额40000万金币；</p> 63 <p>（2）选择4-5场过关投注的，单张最高奖金限额60000万金币；</p> 64 <p>（3）选择6-8场过关投注的，单张最高奖金限额80000万金币。</p> 65 66 <h4>四.延期、中断、取消的比赛，如何算奖？</h4> 67 68 <p>1.延期比赛如何处理：</p> 69 <p>推迟时间未超过36小时，则正常算奖；</p> 70 <p>推迟时间超过36小时或无法确定时间，则该场为无效场次，按比赛取消算奖；</p> 71 <p>取消赛事算奖：单关固定玩法返还投注金额，过关投注该场赔率值按1.0计算奖金；</p> 72 73 <p>2.中断比赛如何处理：</p> 74 <p>36小时内继续完成比赛则正常算奖；</p> 75 <p>36小时内未完成比赛则该场为无效场次，按比赛取消算奖；</p> 76 77 <p>3.取消赛事算奖：单关固定玩法返还投注金额，过关投注该场赔率值按1.0计算奖金；</p> 78 79 <h4>五．截止投注时间、开奖时间</h4> 80 <p>截止投注时间为比赛正式开始前5分钟，单式投注的开奖时间为比赛结束后，复式投注的开奖时间为所选所有比赛结束后。</p> 81 <p>注：可根据投注额、突发事件等因素，拒绝某些大额投注、暂停或提前截止针对该场比赛的所有投注。</p> 82 </div> 83 </div> 84 </div> 85 </body> 86 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 87 <script type="text/javascript"> 88 for(var i = 0; i < 100; i++) { 89 $("#big_box").append("<p>这是第" + i + "条数据</p>"); 90 } 91 $("button").click(function() { 92 $(".gz-mc").show(); 93 $("body").css({ 94 "overflow": "hidden" 95 }); 96 //$('body').on('touchmove', preventDefaultFn); 97 stopScrollLong(); 98 }) 99 100 $(".gz-nrgb span").click(function(){ 101 $(".gz-mc").hide(); 102 $("body").css({ 103 "overflow": "auto" 104 }); 105 recoverScrollLong(); 106 }) 107 function stopScrollLong() { 108 var top = -$(window).scrollTop(); 109 $('body').css({ 110 'position': 'fixed' 111 }) 112 setTimeout(function() { 113 $('body').css({ 114 'top': top + 'px' 115 }) 116 }, 10) 117 } 118 119 function recoverScrollLong() { 120 var top = parseInt(-$('body').css('top').replace('px', '')); 121 $('body').css({ 122 position: 'static' 123 }) 124 $(window).scrollTop(top); 125 } 126 </script> 127 128 </html>
突然发现少了两个css文件，这两个里面一个是清楚css默认格式的，一个是给弹窗鞋写样式的。你们可以自己写，没有什么问题。这里也附上百度的网盘链接，请点这里。密码：kiwk
这个时候就能达到我们想要的效果了。简单的记录一下
