Comment NE PAS cliquer sur un lien hypertexte tout en faisant glisser dans iScroll

Question

J'ai activé le iScroll sur ma page.

Remarquez que les images dans la fenêtre défilante sont des liens (donc une popup s'ouvre pour afficher l'image en plus grand, vous voyez le concept). MAIS l'une des belles fonctionnalités de iScroll est que vous pouvez faire glisser votre souris pour défiler. MAIS maintenant, lorsque quelqu'un le fait glisser, il ouvre automatiquement l'image au lieu de défiler la barre. Existe-t-il une solution de contournement?

Answer 1

Je dirais d'ajouter une classe à chaque lien pendant que le défilement est en cours. Par exemple, ajoutez une classe nommée "dragging" à chaque lien pendant le défilement, puis supprimez la classe lorsque le défilement s'arrête.

Cela signifie que vous pouvez ajouter un preventDefault à tout lien qui a la classe "dragging". Quelque chose comme :

    myScroll1 = new iScroll('scroll1', {
        snap: 'li',
        momentum: false,
        hScrollbar: false,
        onScrollStart: function () {
            $('div#iscroll1 a').addClass("dragging");
        },
        onScrollEnd: function () {
            $('div#iscroll1 a').removeClass("dragging");
            document.querySelector('.indicator > li.active').className = '';
            document.querySelector('.indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
        }
    });
    $('.dragging').click(function (e) {
        e.preventDefault();
    }

Cependant, ce code n'a pas été testé, donc vous devrez peut-être affiner les sélecteurs.

Answer 2

J'ai créé un patch pour iScroll qui corrige ce problème. Vous pouvez voir la différence ici : https://github.com/zmathew/iscroll/commit/3d77681a9f4b3a6b5a7579df4443bc53356d5584

Alternativement, vous pouvez télécharger la version corrigée complète d'iScroll d'ici : https://github.com/zmathew/iscroll/tree/prevent-scroll-clicks

Answer 3

La solution n'a pas fonctionné pour moi, voici ma solution simple.
Définissez le glissement sur vrai lorsque vous glissez, définissez-le sur faux lorsque ce n'est pas le cas. Si vous cliquez pendant le glissement, ignorez-le.

 var myScroll = new iScroll("scroll1", { onBeforeScrollMove: function () {
            window.dragging = true;
        },
            onScrollEnd: function () {
                //had to use a timeout here because without it it would fire on links at the end of the drag / dragging slowly
                setTimeout(function () { 
                    window.dragging = false;
                }, 10);
            }

        });

et sur les ancres vérifiez le glissement

    $(".myanchors a").click(function () { 
        if (window.dragging) {
            return false;
        }
    });

Answer 4

Bonjour voici la version modifiée de iScroll 4.2.5 à télécharger

iScroll 4.2.5 + correction de clic

onBeforeScrollStart: function (e) {if(!hasTouch) e.preventDefault();},