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.