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();

})


版权声明:本文为weixin_39521009原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。