<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title></title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> .scroll{ width:2000px; height:100px; display: flex; flex-direction: row; border:1px solid gray; position: fixed; top: 0; left:0; } .flex-item{ flex: 14; border-right: 1px solid gray; line-height: 100px; text-align: center; } </style> </head> <body> <div class="scroll"> <div class="flex-item">推荐</div> <div class="flex-item">热点</div> <div class="flex-item">视频</div> <div class="flex-item">济南</div> <div class="flex-item">社会</div> <div class="flex-item">头条</div> <div class="flex-item">问答</div> <div class="flex-item">图片</div> <div class="flex-item">娱乐</div> <div class="flex-item">科技</div> <div class="flex-item">汽车</div> <div class="flex-item">体育</div> <div class="flex-item">财经</div> <div class="flex-item">军事</div> </div> <script> var startX=0; var startY=0; var enX=0; var screenWidth=$(window).width(); var elementWidth=$(".scroll").width(); var lei=0; var flag=false; var flag1=false; var leijia=0; $('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; }); $('body').bind('touchend',function(e){ enX = e.originalEvent.changedTouches[0].pageX console.log("离开屏幕*********"+enX) lei=enX-startX; leijia=leijia+lei; }); $('body').bind('touchmove',function(e){ //获取滑动屏幕时的X,Y endX = e.originalEvent.changedTouches[0].pageX, endY = e.originalEvent.changedTouches[0].pageY; //获取滑动距离 distanceX = endX-startX; distanceY = endY-startY; //判断滑动方向 if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){ console.log('往右滑动'); if(flag){ leijia=-(elementWidth-screenWidth); flag=false; } var offsetop=$(".scroll").offset().left; if(offsetop<0){ $(".scroll").css({'left':leijia+distanceX}); }else{ $(".scroll").css({'left':0}); leijia=0; flag1=true; } }else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){ console.log('往左滑动'+"*********"+leijia); if(flag1){ leijia=0; flag1=false; } var offsetop=$(".scroll").offset().left; if(offsetop>-(elementWidth-screenWidth)){ $(".scroll").css({'left':leijia+distanceX}); }else{ $(".scroll").css({'left':-(elementWidth-screenWidth)}); leijia=-(elementWidth-screenWidth); flag=true; } console.log("offsetTop********************"+$(".scroll").offset().left) }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){ console.log('往上滑动'); }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){ console.log('往下滑动'); }else{ console.log('点击未滑动'); } }); </script> </body> </html>