Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:05:22
original
1902 Les gens l'ont consulté

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);  //向右滑动你要执行的动作
  }
Copier après la connexion

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>
Copier après la connexion

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);
Copier après la connexion

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.

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!