Quickly solve jquery.touchSwipe left and right sliding and vertical scroll bar conflicts_jquery

This article shares with you the solution to the conflict between jquery.touchSwipe’s left and right sliding and vertical scroll bars. The specific content is as follows

Html5 just needs a function that can be switched between left and right, but the up and down scroll bar function must be retained. I used the jquery.touchSwipe plug-in on the mobile terminal. After searching online for a long time, I didn't see the corresponding solution. I had to modify it myself, and finally it worked.

First picture:

The solution is that I added the left and right scrolling events to the Body, and used the vertical scrolling of the DIV for the up and down activities. Above code:

$("#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);  //向右滑动你要执行的动作
  }

Then I set the scroll bar of the div up and down;

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

Set the default height code of body and div:

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

The above is how to solve the conflict between left and right sliding and vertical scroll bars. I hope it will be helpful to everyone's learning.