JS实现移动端判断上拉和下滑功能
程序员文章站
2023-02-23 22:14:52
一、手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑。
二、js中距离:pagey、clienty、offsety的区别:
&n...
一、手指触屏,利用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实现移动端判断上拉和下滑功能,希望对大家有所帮助
上一篇: php魔术方法与魔术变量、内置方法与内置变量的深入分析
下一篇: js实现拖拽上传图片功能