Quickly solves the conflict between the left and right sliding of jquery. touchSwipe and the vertical scroll bar.

Quickly solves the conflict between the left and right sliding of jquery. touchSwipe and the vertical scroll bar.

This article describes how to solve the conflict between the left and right sliding of jquery. touchSwipe and the vertical scroll bar. The details are as follows:

Html5 is required to implement a switch between the left and right, but the up and down scroll bars must be retained. I used the jquery. touchSwipe plug-in on the mobile end. I haven't seen the corresponding solution for a long time on the Internet. I can only modify it myself, and I can use it at last.

First, the previous figure:

The solution is to add the left and right scrolling events to the Body, while the vertical scrolling of the up and down actions is used. Code:

$ ("# Body "). swipe ({fingers: 'all', swipeLeft: swipe1, swipeRight: swipe2}); function swipe1 (event, direction, distance, duration, fingerCount) {tab_shipu (-1 ); // Slide left the action you want to execute} function swipe2 (event, direction, distance, duration, fingerCount) {tab_shipu (1); // slide right the action you want to execute}

Then I set the scroll of the div in the upper and lower scroll bars;

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

Set the default height code for the body and div:

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

The above is the solution to the conflict between the left and right sliding and the vertical scroll bar. I hope it will help you learn.

Articles you may be interested in:

• Found a solution to conflicts between jQuery and Prototype
• Solutions to conflicts between jQuery Library and other JS Libraries
• Solution to $ conflict after jQuery is loaded
• Jquery-based horizontal scroll bar (slide)
• Implementation of sliding fixed effects of the blog sidebar module following the scroll bar (js + jquery, etc)
• Conflict between jquery and js Functions
• Solve jquery plug-in conflicts
• Quick Solution for conflicts between JQuery $ and other JS
• Comparison between jQuery's method to avoid conflict between $ operator and other JS Libraries
• Jquery plug-in conflict (jquery. noconflict) Solution