h5滚动时侧滑出现_H5开发－禁止页面上下滚动漏出微信黑色背景，自定义页面左右滑动事件，阻止事件冒泡...

禁止页面上下滚动

有时我们不希望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 

//左划，下一页，添加业务逻辑

}

});

js阻止事件冒泡

如果我们希望点击或者滑动事件不要再向上层冒泡，则通过stopPropagation方法阻止即可document.getElementById("pop-main").addEventListener('touchmove', function(e) {

e.stopPropagation();

})