彈窗滑動，形成body跟隨滑動解決辦法

時間 2019-11-20

標籤滑動形成 body 跟隨解決辦法简体版

原文原文鏈接

　　今天測試的時候遇到一個移動端的bug，爲何說是移動端的呢，由於在谷歌瀏覽器的移動模式下，這個是不會出現的。先描述具體的狀況。一個長頁面（確定是比手機長的頁面，因此確定會滑動），裏面有一個按鈕，點擊按鈕的時候，會有一個比屏幕小的彈窗，出現遊戲規則。這個遊戲規則也是超出這個彈窗的大小的，多以這個彈窗也是會滑動的。javascript

　　真機測試的時候發現，當彈窗滑動到最低端的時候，繼續向上滑動，發現底部的body頁面也開始向上滑。我已經對body設置了overflow：hidden。可是移動端仍是無論用，因此在網上尋找答案。主要是兩種解決辦法。css

　　第一種：html

　　就是在彈窗彈起的時候直接把滑動事件touchmove禁止了。可是這樣的話，咱們的彈窗裏面的內容也是不能滑動，這顯然是不能夠的。因此咱們嘗試了第二種解決方案。java

　　第二種：jquery

　　在彈窗彈起的時候把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分鐘內(含傷停補時，不含加時)的勝平負結果。 投注選項有三、一、0(勝、平、負) 。</p>
 33 
 34                     <p>2.讓球勝平負：競猜兩支球隊讓球之後，在90分鐘內(含傷停補時，不含加時)的勝平負結果。 投注選項有三、一、0(勝、平、負) 。</p>
 35 
 36                     <p>3.比分：競猜兩支球隊在90分鐘內(含傷停補時，不含加時)的比分。 投注選項有1:0 2:0 3:0等31種選項。</p>
 37 
 38                     <p>4.總進球：競猜兩支球隊在90分鐘內(含傷停補時，不含加時)的總進球數量。 投注選項有0、一、二、三、四、五、六、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默認格式的，一個是給彈窗鞋寫樣式的。大家能夠本身寫，沒有什麼問題。這裏也附上百度的網盤連接，請點這裏。密碼：kiwkapp

　　這個時候就能達到咱們想要的效果了。簡單的記錄一下ide

1. layui彈窗滑動問題
2. 滑動窗口法詳解
3. 跟隨滑動的幾種方法
4. 滑動窗口法
5. Slip——整屏滑動，移動端跟隨手指滑動
6. 滑動窗口
7. element 彈窗「閃動」解決辦法
8. View的滑動之瞬間滑動與彈性滑動
9. 滑動窗口算法
10. 【算法】滑動窗口
更多相關文章...
• ionic 滑動框 - ionic 教程
• jQuery Mobile 表單滑動條 - jQuery Mobile 教程
• 算法總結-滑動窗口
• SpringBoot中properties文件不能自動提示解決方法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。