移動端頁面 彈出框滾動，底部body鎖定，不滾動 / 微信網頁禁止回彈效果

需求：頁面有彈出層菜單，當彈出層菜單超出屏幕可視區域時，不能滾動。加上滾動后，底部body的滾動事件如何禁止，加上了overflow：hidden;還是不可用。

如下圖：地區彈出框可以滾動，而底部的body不隨着滾動。

參考網址：JavaScript如何屏蔽頁面的滾動？

              解決方案鏈接

動態的改變body的樣式，測試了可行

var scrollTop = $body.scrollTop();//body設置為fixed之后會飄到頂部，所以要動態計算當前用戶所在高度
$body.css({
    'overflow':'hidden',
    'position': 'fixed',
    'top': scrollTop*-1
});
$loadMask.css('top',scrollTop);//設置遮罩層top值
 
/*取消后設置回來*/
$body.css({
    'overflow':'auto',
    'position': 'static',
    'top': 'auto'
});

 另：

微信頁面會出現下拉回彈的情況，這個會有些影響。

禁止微信頁面回彈鏈接

以下是轉載

warning:較完美，意思就是不完美。如果朋友們有完美的解決方案，麻煩給我留言。謝謝哈。

=============我是華麗麗的分隔線===============

今天被提了一個需求：頁面在微信瀏覽器中禁止下拉露底。如：不能出現下圖這種情況。

理由未明，反正需求就是這個。

為了解決這個問題，當然就得問度娘啦。

網上提供的解決方法基本是：

這種是最坑爹的答案，雖然是把下拉彈性效果禁止了，可是也把頁面里的滾動條禁止了，導致網頁不能滾屏。

經過了解。微信下拉彈性效果其實是瀏覽器本身的一種特性，為什么瀏覽器的設計者要設計這種特性暫不可知，知道的朋友們麻煩告訴我一聲哈。

而下拉回彈是touchmove事件的一種默認屬性，根據這個，只要禁止瀏覽器最底層box（也就是body）的touchmove事件，就不會回彈了，於是乎就有了上面那種只圖一時之快不負責的代碼。

既然touchmove事件不能禁用，但有時又不能生效，於是筆者想到一種方法 ，如果頁面滾動條在最頂部的時候，禁止下拉，反之允許下拉，這個問題不就順利解決啦？於是乎有了下面代碼：

/**
 * 禁止瀏覽器下拉回彈
 */
function stopDrop() {
    var lastY;//最后一次y坐標點
    $(document.body).on('touchstart', function(event) {
        lastY = event.originalEvent.changedTouches[0].clientY;//點擊屏幕時記錄最后一次Y度坐標。
    });
    $(document.body).on('touchmove', function(event) {
        var y = event.originalEvent.changedTouches[0].clientY;
        var st = $(this).scrollTop(); //滾動條高度  
        if (y >= lastY && st <= 10) {//如果滾動條高度小於0，可以理解為到頂了，且是下拉情況下，阻止touchmove事件。
            lastY = y;
            event.preventDefault();
        }
        lastY = y;
 
    });
}

 

只需要在網頁加載完后立即執行此函數，就可以較完美地實現阻止網頁回彈。當然，只是較完美，還不是完美。因為我發現，當網頁進入出現下拉回彈效果時，手指不放開再往下拉，坑爹地這時候竟然不是touchmove事件了，而是沒有事件！

好吧，瀏覽器設計者深埋雷，我們就邊踩邊挖吧，各前端狗們，大家共勉！