jQuery touchSwipe 콘텐츠 스크롤 기능

Question

jQuery와 touchSwipe 플러그인을 사용하여 내용을 위아래로 스크롤합니다. 수학에 관련된 몇 가지 문제를 겪고 있으며 지역 사회가 신속하게이를 파악하는 데 도움이되는지 알고 싶었습니다.

"distance"변수는 0부터 시작하는 양수 값만 반환하므로 사용자가 UP을 스 와이프 한 다음 DOWN을 스 와이프하기로 결정하면 문제가 발생합니다. 거리 값이 ex :(0, 15up, 32up, 20up, 5up, 10down, 40down). 이러한 모든 상황을 파악하기 위해 if 문을 4 개 작성했습니다. "방향 변경"if 문을 어떻게 처리합니까?

touchSwipe : http://labs.skinkers.com/touchSwipe/

슬쩍 위로 및 기능 아래 :

var _scrolling=false; 
var _prev=0; 
$("#list").swipe({ 
    swipeStatus:function(event, phase, direction, distance, fingerCount) { 
    if(phase=="end"){return false;} 
    if(phase=="move" && !_scrolling) { 
     var t = parseInt($("#list").css("top").split('px')[0]); 
     var s = 0; 
     if(direction=="up" && (distance-_prev) > 0){ 
     //still moving up 
     s = t-(distance-_prev); 
     _prev=distance; 
     } else if(direction=="up" && (distance-_prev) < 0){ 
      //direction change - moving down  
     } else if(direction=="down" && (distance-_prev) > 0){ 
     //still moving down 
      s = t+(distance-_prev); 
     _prev=distance; 
     } else if(direction=="down" && (distance-_prev) < 0){ 
      //direction change - moving up 
     } 
     _scrolling=true; 
     $("#list").animate({ top:s }, 70, function() {_scrolling=false;}); 
    }<!--if end--> 
    }<!--swipeStatus end--> 
}); 

Answer 1

그래서이 문제를 해결 원래 "swipeStatus"기능을 수정하고, 꽤을 만들 수 있었다 몇 일 후에 touchSwipe jQuery 플러그인을 사용하여 절대 영역을 스크롤하는 효율적인 완전 기능 기능.

해결책 :

function swipeScroll(c,b,pd,f){ 
    $(c).swipe({//c style must be position:absolute;top:0; b style must be position:relative; 
     swipeStatus:function(event, phase, direction, distance, fingerCount) { 
     if(phase=="start"){pd=0;} 
     if(phase=="end"){return false;} 
     if(phase=="move" && pd!=distance){ 
      var t = parseInt($(c).css("top"),10); 
      var u = (pd-distance); 
      if(direction=="up" && t != u){ t+=u; }else if(direction=="down" && t != -u){ t-=u; } 
      pd=distance; 
      if(t > 0 || $(b).height() > $(c).height()){t=0;}//top of content 
      else if(($(b).height()-t) >= $(c).height()){//bottom of content 
      t=$(b).height()-$(c).height(); 
      if(typeof f != "undefined"){f();} 
      } 
      $(c).css("top",t); 
     } 
     } 
    }); 
} 

함수 파라미터 설명 :

C : 만약 B 스크롤 할 절대 함량 콘텐츠 "C" PD 둘러싸 상대 용기 : 이전 스크롤에서 이동 된 거리를 저장하는 변수 f : 스크롤이 아래쪽에 도달 할 때 호출하는 함수

,

참고 : 0

사용 예 :

var distance; 
swipeScroll("#list","#body",distance, function() { alert("bottom"); }); 

연구 :

대신하여 "B"는 상대 위치와 "C"상부와 절대 위치가 있어야 "$ (c) .css ("top ", t);" 또한 jQuery animate() 함수를 사용하여 부드러운 슬라이딩 효과를 내기도했지만 실제로는 스크롤이 느려졌습니다. 애니메이션을 실행하면 예기치 않은 결과가 나타났습니다. "t"가 너무 빠르게 스 와이프되면 "0"을 건너 뛰고 방향이 "위로"에서 "아래로"바뀌어 내용이 갑자기 건너 뛰게됩니다.

Answer 2

그냥 참고 : 이벤트를 도청의 사용을 방지 할 줄

if (phase == "end") { return false; } 

를 사용하여. 따라서 해당 이벤트가 필요하면이 줄을 제거해야합니다.