禁止页面上下滚动

有时我们不希望H5在上划或者下划时滚动，漏出黑色背景

现在这个做起来很简单，只需要将H5的最外层设置样式为position:fixed即可

#main{
  position: fixed;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

自定义页面左右滑动事件

对H5的外层div添加touchstart和touchmove事件

计算滑动的X和Y值，如果X的绝对值大于Y的绝对值，我们认为是横向滑动

如果X大于0，则为右划，否则为左划，添加自己逻辑代码

var mybody = document.getElementById("main")


var startX, startY, moveEndX, moveEndY, X, Y;

mybody.addEventListener('touchstart', function(e) {

    startX = e.touches[0].pageX;

    startY = e.touches[0].pageY;

}, false);


mybody.addEventListener('touchmove', function(e) {

    moveEndX = e.changedTouches[0].pageX;

    moveEndY = e.changedTouches[0].pageY;

    X = moveEndX - startX;

    Y = moveEndY - startY;



    if ( Math.abs(X) > Math.abs(Y) && X > 80 ) {
        //右划，上一页，添加业务逻辑

    }
    else if ( Math.abs(X) > Math.abs(Y) && X < -80 ) {
        //左划，下一页，添加业务逻辑

    }


});

js阻止事件冒泡

如果我们希望点击或者滑动事件不要再向上层冒泡，则通过stopPropagation方法阻止即可

document.getElementById("pop-main").addEventListener('touchmove', function(e) {
    e.stopPropagation();
})