Résolvez rapidement jquery.touchSwipe coulissant vers la gauche et la droite et la barre de défilement verticale conflicts_jquery

Cet article partage avec vous la solution au conflit entre les barres de défilement coulissantes et verticales gauche et droite de jquery.touchSwipe. Le contenu spécifique est le suivant

.

Html5 a juste besoin d'une fonction qui peut être basculée entre gauche et droite, mais la fonction de barre de défilement haut et bas doit être conservée. J'ai utilisé le plug-in jquery.touchSwipe sur le terminal mobile. Après une longue recherche en ligne, je n'ai pas vu la solution correspondante, j'ai dû la modifier moi-même, et finalement cela a fonctionné.

Première photo :

La solution est que j'ai ajouté les événements de défilement gauche et droit au corps et utilisé le défilement vertical du DIV pour les activités de haut en bas. Code ci-dessus :

$("#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);  //向右滑动你要执行的动作
  }

Ensuite, j'ai réglé la barre de défilement du div de haut en bas
;

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

Définissez le code de hauteur par défaut du corps et du div :

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

Ce qui précède explique comment résoudre le conflit entre les barres de défilement coulissantes gauche et droite et verticales. J'espère que cela sera utile à l'apprentissage de chacun.