一、手指触屏，利用touchstart和touchend计算前后滑动距离，判断是上拉还是下滑。
二、js中距离：pageY、clientY、offsetY的区别：
offsetY:相对于父节点的偏移距离。
clientY:相对于浏览器，滚轮距离不算在内。
pageY:相对于浏览器，滚轮滚动的距离算在内；本例中，用pageY，触屏时记录位置-startY，结束时记录-endY，两个相减以正负判断是上移还是下滑。
三、touchstart有touches属性，touchend有changedTouches属性，两个属性中分别有pageY、pageX信息。
//滑动处理 var startX, startY; document.addEventListener('touchstart',function (ev) { startX = ev.touches[0].pageX; startY = ev.touches[0].pageY; }, false); document.addEventListener('touchend',function (ev) { var endX, endY; endX = ev.changedTouches[0].pageX; endY = ev.changedTouches[0].pageY; var direction = GetSlideDirection(startX, startY, endX, endY); switch(direction) { case 0: alert("无操作"); break; case 1: // 向上 alert("up"); break; case 2: // 向下 alert("down"); break; default: } }, false);
四、
function GetSlideDirection(startX, startY, endX, endY) { var dy = startY - endY; //var dx = endX - startX; var result = 0; if(dy>0) {//向上滑动 result=1; }else if(dy<0){//向下滑动 result=2; } else { result=0; } return result; }
总结
以上所述是小编给大家介绍的JS实现移动端判断上拉和下滑功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: