Comment ne pas cliquer sur un HREF tout en faisant glisser dans Iscroll

Question

J'ai l'iscroll activé sur ma page.

Remarquez que les images du défilement sont des liens (donc une fenêtre contextuelle s'ouvre pour la plus grande image, vous savez l'accord). Mais l'une des belles fonctionnalités d'Iscroll est que vous pouvez faire glisser votre souris pour faire défiler. Mais maintenant, lorsque quelqu'un le fait glisser, il ouvre automatiquement l'image au lieu de faire défiler la barre. Y at-il un travail autour?

Answer 1

Je dirais ajouter une classe à chaque ancre pendant que le défilement est glisser. Par exemple, ajoutez un nom de classe de "glisser" vers chaque ancre pendant le glisser-glisser, puis supprimez la classe lorsque vous faites glisser les arrêts.

Cela signifie que vous pouvez ajouter un préavis à tout lien qui a la classe "glisser". Quelque chose dans le sens de:

    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();
    }

Il s'agit cependant de code non testé, vous devrez peut-être affiner les sélecteurs.

Answer 2

J'ai créé un correctif pour iscroll qui résout ce problème. Vous pouvez voir le diff ici:https://github.com/zmathew/iscroll/commit/3d77681a9f4b3a6b5a7579df4443bc53356d5584

Alternativement, vous pouvez saisir toute la version patchée d'Iscroll à partir 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 glisser vers True lorsque vous faites glisser, définissez-le sur false quand pas. Si vous cliquez lorsque vous faites glisser, 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 la traînée

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

Answer 4

Bonjour ici est la version modifiée d'Iscroll 4.2.5 à télécharger

ISCROLL 4.2.5 + Cliquez sur Correction

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