Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 15:05:22
Original
1920 people have browsed it

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);  //向右滑动你要执行的动作
  }
Copy after login

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

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

Set the default height code of body and div:

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

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.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template