html5 页面可以上下滚动条,h5页面上下左右滑动

var startX = 0,

startY = 0,

operate = 0;

backDom.addEventListener('touchstart', function(evt) {

evt.preventDefault();

var touch = evt.touches[0], //获取第一个触点

x = Number(touch.pageX), //页面触点X坐标

y = Number(touch.pageY); //页面触点Y坐标

//记录触点初始位置

startX = x;

startY = y;

});

backDom.addEventListener('touchmove', function(evt) {

var touch = evt.touches[0], //获取第一个触点

x = Number(touch.pageX), //页面触点X坐标

y = Number(touch.pageY); //页面触点Y坐标

//判断滑动方向

if (y - startY>0) {

//console.log('下滑了!');

operate = 1;

}

});

backDom.addEventListener('touchend', function() {

if(operate == 1){

inviteDom.style.top = "100%"

inviteLetterBackwardDom.style.bottom = "-100%"

inviteLetterForwardDom.style.bottom = "-100%"

}

});

你可能感兴趣的:(html5,页面可以上下滚动条)