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);

上記は、左右のスライド バーと垂直スクロール バーの間の競合を解決する方法です。皆さんの学習に役立つことを願っています。