原文連結：https://www.haorooms.com/post/webapp_bodyslidebcdiv

下圖是截取了專案部分圖片~左邊白色區域是從左側滑出的選單欄，右邊灰色區域是遮罩層；

當左邊使用者中心白色區域選單過多，或者是手機螢幕過小出現滾動條的時候，在其表層滑動時，底層部分body也會跟著滑動~

解決方法：

1、該區域沒有滾動條：

最直接的辦法，禁止表層滑動，如果該區域有滾動條也無法再繼續往下滑動

 //設定頂欄禁止滑動
    $('div.col-xs-6').bind("touchmove", function (e) {
        e.preventDefault();
    });
    //設定遮罩層禁止滑動
    $("#mask").bind("touchmove", function (e) {
        e.preventDefault();
    });
 

2、該區域有滾動條：

滾動軸滾到底部的時候，會觸發body的滑動，那麼就需要在事件滾到底部的時候對錶層的div做一個touchmove的阻止。到達滾動軸底部，向下滑動，阻止事件，向上滑動，開啟事件。為此就要判斷touchmove的方向了（參考haorooms前端部落格）

    //解決側邊欄滑動，導致底層body滑動（touchmove的阻止）
    var startX,startY;
    $("aside.float-navigation").bind("touchstart", function (events) {
        startX = events.originalEvent.changedTouches[0].pageX,
        startY = events.originalEvent.changedTouches[0].pageY;
    });
    //獲得頂部欄的高度
    var topHeight = $('div.top-bar').height();
    //獲得當前可視視窗高度
    var clientHeight = $(window).height();
    $("aside.float-navigation").on("touchmove",".nano-content", function (events) {
        var ulHeight = $(this).children().height();
        var scrollTop = $(this).scrollTop();
        var scrollheight = $(this)[0].scrollHeight;
        if(topHeight + ulHeight <= clientHeight){
                event.preventDefault();
        }else{
            if (clientHeight + scrollTop >= scrollheight ) { //滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight。
            $(".nano-content").bind("touchmove", function (event) {
              var  moveEndX = event.originalEvent.changedTouches[0].pageX,
                  moveEndY = event.originalEvent.changedTouches[0].pageY;
              var  theX = moveEndX - startX,
                    theY = moveEndY - startY;
                if (Math.abs(theY) > Math.abs(theX) && theY > 0) { //判斷上滑還是下滑！
                    $(".nano-content").unbind("touchmove");//滑動到底部再往上滑動，解除阻止！
                }
                if (Math.abs(theY) > Math.abs(theX) && theY < 0) {
                    event.preventDefault();//滑動到底部，再往下滑動，阻止滑動！
                }
            })
        }
            if (scrollTop < 20) {//滾到頂部20px左右
                $(".nano-content").bind("touchmove", function (event) {
                    var  moveEndX = event.originalEvent.changedTouches[0].pageX,
                         moveEndY = event.originalEvent.changedTouches[0].pageY;
                    var  theX = moveEndX - startX,
                         theY = moveEndY - startY;
                    if (Math.abs(theY) > Math.abs(theX) && theY > 0) {
                        event.preventDefault();//滑動到頂部，再往上滑動，阻止滑動！
                    }
                    if (Math.abs(theY) > Math.abs(theX) && theY < 0) {
                        $(".nano-content").unbind("touchmove");
                    }
                })
            }
        }
    });
 

使用了以上方法基本上能夠阻止body的滾動。但並不是最完美的，有時候還是會有問題~

另外張鑫旭大神也有一種解決辦法：

具體請參考 http://www.zhangxinxu.com/wordpress/?p=5844