今天测试的时候遇到一个移动端的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. k8s probe

    livenessProbe: httpGet: path: /abc/401 port: 8384 scheme: HTTP

  2. 小程序textarea完美填坑

    相信做微信小程序的码友们都被textarea这个原生组件坑过,什么placeholder位置错乱,穿透弹窗或遮罩层,ios上输入法弹起后换行输入内容遮挡,删除输入内容时内容被遮挡等等... 反正综上所 ...

  3. webapi 知识点

    在web api 中后台的方法必须 加入 [HttpGet] ,[HttpPost],[HttpPut],[HttpDelete] 来区分,这是一种习惯. ps: get 方式参数都存在http协议头 ...

  4. Java精确测量代码运行时间

    Java精确测量代码运行时间: --------------- long startTime = System.nanoTime(); //開始時間 for(int i = 0;i<10000; ...

  5. Dubbo工作原理，集群容错，负载均衡

    Remoting:网络通信框架,实现了sync-over-async和request-response消息机制. RPC:一个远程过程调用的抽象,支持负载均衡.容灾和集群功能. Registry:服务 ...

  6. SEO需要掌握的基础知识

    什么是SEO?  官方解释:  SEO是指通过对网站内部调整优化及站外优化,使网站满足搜索引擎收录排名需求,在搜索引擎中提高关键词排名, 从而把精准用户带到网站,获得免费流量,产生直接销售或品牌推广 ...

  7. centos7启动流程（从加电开始）

    图片来自于https://blog.csdn.net/qq_27754983/article/details/75212666 1. UEFI或BIOS启动 服务器加电后,CPU 自动重置成初始状态, ...

  8. [Swift]LeetCode368. 最大整除子集 | Largest Divisible Subset

    Given a set of distinct positive integers, find the largest subset such that every pair (Si, Sj) of ...

  9. [Swift]LeetCode503. 下一个更大元素 II | Next Greater Element II

    Given a circular array (the next element of the last element is the first element of the array), pri ...

  10. [Swift]LeetCode563. 二叉树的坡度 | Binary Tree Tilt

    Given a binary tree, return the tilt of the whole tree. The tilt of a tree node is defined as the ab ...