HTML5 移動端的上下左右滑動問題

在移動端頁面上，若是要實現【頂部輪播，手指觸摸左右滑動】
個人方案是，經過監聽滑動，阻止默認事件來完成

div.addEventListener('touchmove',function(event){
    event.preventDefault();//阻止瀏覽器的默認事件
})

　　

這樣，左右滑動能夠完成了，可是觸摸這個div的時候，頁面不能上下滑動了，怎麼辦？

當touchmove的時候，實時改變window的scrolltop值？

這樣會有原生的滑動效果嗎？

你們有什麼解決方案

問題已經解決了，思路是

var xx,yy,XX,YY,swipeX,swipeY ;
 div.addEventListener('touchstart',function(event){
     xx = event.targetTouches[0].screenX ;
     yy = event.targetTouches[0].screenY ;
     swipeX = true;
     swipeY = true ;
 })
 div.addEventListener('touchmove',function(event){
      XX = event.targetTouches[0].screenX ;
      YY = event.targetTouches[0].screenY ;
      if(swipeX && Math.abs(XX-xx)-Math.abs(YY-yy)>0)  //左右滑動
      {
          event.stopPropagation();//組織冒泡
          event.preventDefault();//阻止瀏覽器默認事件
          swipeY = false ;
          //左右滑動
      }
      else if(swipeY && Math.abs(XX-xx)-Math.abs(YY-yy)<0){  //上下滑動
          swipeX = false ;
          //上下滑動，使用瀏覽器默認的上下滑動
      }
  })

　　

能夠判斷下move大概方向，而後水平的時候阻止默認行爲，其餘時候不阻止就OK了

 

其實 單純判斷move是水平也是不行的，若是用戶是斜上地滑怎麼判斷？

個人想法是，在這個輪播上實現這樣的一個覆蓋層

當用戶從A觸發了touchstart 結束或者move到b，或者b start，在c上結束，斷定爲右滑。左滑則相反。