jquery.touchSwipe 왼쪽 및 오른쪽 슬라이딩 및 수직 스크롤 막대 conflicts_jquery를 신속하게 해결합니다.

이 글에서는 jquery.touchSwipe의 왼쪽 및 오른쪽 슬라이딩 및 수직 스크롤 막대 충돌에 대한 해결 방법을 공유합니다.

Html5에는 좌우로 전환할 수 있는 기능만 있으면 되지만, 상하 스크롤바 기능은 그대로 유지되어야 합니다. 모바일 단말기에서 jquery.touchSwipe 플러그인을 사용했는데, 오랫동안 온라인으로 검색해봐도 해당 해결 방법이 보이지 않아서 직접 수정해서 결국 성공했습니다.

첫 번째 사진:

해결책은 Body에 왼쪽 및 오른쪽 스크롤 이벤트를 추가하고 위쪽 및 아래쪽 활동에 DIV의 세로 스크롤을 사용하는 것입니다. 위 코드:

$("#body").swipe( { fingers:'all', swipeLeft:swipe1, swipeRight:swipe2} );
  function swipe1(event, direction, distance, duration, fingerCount) {
   tab_shipu(-1); //向左滑动你要执行的动作 
  }
         
  function swipe2(event, direction, distance, duration, fingerCount) {
    tab_shipu(1);  //向右滑动你要执行的动作
  }

그런 다음 div의 스크롤 막대를 위아래로 설정했습니다.

<div id="cook" class="cook"></div>
<style>
  .cook{
    overflow: auto;
  }
</style>

body 및 div의 기본 높이 코드 설정:

$("body").css("height",document.body.scrollHeight);
$(".cook").css("height",document.body.scrollHeight-$('#cook').position().top);

위 내용은 왼쪽과 오른쪽 슬라이딩과 수직 스크롤바의 충돌을 해결하는 방법입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.