移动端滑屏滚动事件的问题(横向滑动阻止垂直页面滚动)


在项目中遇到一个问题,横向滑动的时候想阻止垂直放向页面滚动,一开始用$(document).css("overflow-y","hidden")并没有效果,后来才发现我们在判断为横向滑动时用event.preventDefault阻止默认事件即可,

   var taskswiper = {
      startX: 0,
      startY: 0
   };
   $(id).on('touchstart', 'li', function(event){
      if (event.originalEvent.targetTouches.length == 1) {
         taskswiper.startX = event.originalEvent.targetTouches[0].pageX;
         taskswiper.startY = event.originalEvent.targetTouches[0].pageY;
      }
   });

   $(id).on('touchmove', 'li', function(event){
      taskswiper.leftX = event.originalEvent.targetTouches[0].pageX - taskswiper.startX;
      taskswiper.leftY = event.originalEvent.targetTouches[0].pageY - taskswiper.startY;

      //横向移动大于纵向移动
      if ((Math.abs(taskswiper.leftX) > Math.abs(taskswiper.leftY))) {
         //阻止纵向滚动事件
         event.preventDefault();

     //执行想做的事情
     
      }
   });

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM