ホームページ > ウェブフロントエンド > jsチュートリアル > jquery.touchSwipeの左右のスライドと垂直スクロールバーのconflicts_jqueryをすばやく解決します

jquery.touchSwipeの左右のスライドと垂直スクロールバーのconflicts_jqueryをすばやく解決します

WBOY
リリース: 2016-05-16 15:05:22
オリジナル
1934 人が閲覧しました

この記事では、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);
ログイン後にコピー

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート