Prévenir uniquement le défilement horizontal mobile app

Je suis le développement d'une web app. Sur le côté gauche est une barre latérale à l'aide de la Sidr-plugin (Plugin jQuery: Sidr). Le site de test est sur mon développement serveur. Mon problème est que si je suis faites glisser le doigt de gauche à droite de la barre latérale s'affiche. C'est très bien. Mais si je veux fermer la barre latérale en glissant de droite à gauche, je dois éviter le défilement par ajouter ce code suivant:

$('body').bind('touchmove', function(e){e.preventDefault()})

Je l'ai fait, mais maintenant: Ma navigation en haut de la page (menu) ne fonctionne pas bien. Je ne peux pas faire défiler jusqu'à la fin.

Donc ma question est: Comment puis-je changer cela. Il ne devrait empêcher le Défilement vertical si je vais fermer la barre latérale sur la gauche.

Voici mon JavaScript complet:

$(function(){
    $(document).foundation();
    $('#sidebar-toggle').sidr();

    var hammertime = Hammer(document.getElementById("wrapper")).on("swiperight", function(event) {
        $.sidr('open');
    });

    var hammertime = Hammer(document.getElementById("wrapper")).on("swipeleft", function(event) {
        $.sidr('close');
    });

    var hammertime = Hammer(document.getElementById("content")).on("tap", function(event) {
        $.sidr('close');
    });

    $('body').bind('touchmove', function(e){e.preventDefault()})
});

InformationsquelleAutor Jan Andrè Schlösser | 2013-05-12

0

Faire de la page déroulante

Quelque chose comme cela?

Je pense que l'utilisation de $(document) serait mieux!

Référence: Éviter de défilement horizontale sur jQuery Mobile
```
var lastY;
$(document).bind('touchmove', function (e){
    var currentY = e.touches[0].clientY;
    if (currentY !== lastY){
        //moved vertically
        return;
    }
    lastY = currentY;
    //insert code if you want to execute something when an horizontal touchmove is made
});
```
- Le premier lien est en fait de la bonne façon. Mais ce faisant, d'empêcher le défilement horizontal trop. Par ce moyen je ne peux pas faire défiler la navigation (lien de menu dans le noir au-dessus de la barre d'outils) trop.
- Peut-être que quelque chose comme cela? Pas testé. var nageoires; $(document).bind('touchmove', function (e){ var currentY = e.touche[0].clientY; si (currentY === nageoires){ // déplacement horizontal return; } nageoires = currentY; });
- Peut-être que vous ne comprenez pas mon problème. Je vais décrire mieux:
- Lorsque vous visitez le site http://jan-schloesser.noip.me/phpfundamentals/gallery/ avec un appareil mobile et que vous faites glisser le doigt de gauche à droite de la barre latérale s'affiche. Si je supprime cette $('body').bind('touchmove', function(e){e.preventDefault()}) ligne, je peux fermer la barre latérale en glissant de droite à gauche. Mais la partie gauche du site (le contenu) est de défilement vertical. Comme ceci: jan-schloesser.noip.me/phpfundamentals/galerie . Je veux éviter le défilement vertical mais pas le défilement horizontal, afin que je puisse utiliser le menu complètement.
- Juste une seconde. Si vous voulez que votre code permettant à l'utilisateur(dans ce cas, vous) pour faire défiler horizontalement? (donc de gauche à droite pour ouvrir le menu et de droite à gauche pour le fermer?)
- Yip, c'est vrai. Quoi de mieux que d'empêcher le défilement vertical complètement, est seulement de prévenir sur la fermeture de la barre latérale. Mais si oui ou non cela sera possible.
- Désolé, dans votre titre est écrit "empêcher le défilement horizontal" je pensais que tu voulais éviter le défilement horizontal lol j'ai mis à jour le code, c'est exactement la même chose, mais maintenant, il empêche le défilement vertical
- Merci pour la réponse. Mais je pense que vous ne comprenez pas le problème. Voir cet écran: img15.imageshack.us/img15/661/fotooy.png & img41.imageshack.us/img41/2998/fotokf.png La seconde image montre une barre de défilement verticale et dans le côté gauche de la page (le contenu), vous pouvez faire défiler. Cela devrait être évitée, comme dans la première capture d'écran. Mais quand je l'empêcher par $('body').bind('touchmove', function(e){e.preventDefault()}) je ne peux pas faire défiler horizontalement dans la navigation. Le défilement ne doit prévenir lors de la fermeture de la barre latérale en glissant de droite à gauche.
InformationsquelleAutor Niccolò Campolungo

J'ai essayé d'intégrer Sidr avec le Marteau JS mais il y a un conflit, donc je me suis débarrassé de Marteau et utilisé le code ci-dessous, qui utilise TouchWipe JS combiné avec Sidr JS.

<!-- Swipe to open or close mobile menu -->

<script>

      jQuery(window).touchwipe({
        wipeLeft: function() {
          //Close
          jQuery.sidr('close', 'sidr-main');
        },
        wipeRight: function() {
          //Open
          jQuery.sidr('open', 'sidr-main');
        },
        preventDefaultEvents: false
      });

</script>

Je crois que le problème que vous rencontrez avec de droite à gauche de balayage doit être fixe.

InformationsquelleAutor Syed Priom

Vous devez vous connecter pour publier un commentaire.