解决手机上层滑动，导致底层body滑动（touchmove的阻止）

原文链接：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