web-dev-qa-db-fra.com

Evénement jQuery Live Scroll sur mobile (solution de rechange)

Le problème ancien: obtenir le déclenchement de l'événement de défilement lorsqu'un utilisateur fait défiler un élément alors qu'il se trouvait sur un site ou une application mobile (vue Web).

Tout ce que je recherche, c'est d'accéder à la valeur correcte scrollTop() lorsqu'un utilisateur fait défiler ma page sur un appareil mobile au lieu de l'obtenir lorsqu'il s'arrête.

Je suis sûr qu'il existe une solution de contournement quelque part. Si je ne me trompe pas, cette limitation est définie par iOS et des discussions ont eu lieu à ce sujet ces dernières années.

J'ai essayé d'implémenter des émulateurs de défilement natifs, mais aucun d'entre eux ne semble fonctionner comme je le souhaite. Pour être honnête, il semble exagéré si tout ce que je veux vraiment, c'est un scrollTop() persistant alors qu'un utilisateur fait défiler.

Je pense actuellement à peut-être démarrer un compteur sur touchStart et l'arrêter sur touchStop, mais quelque chose me dit que je perds mon temps.

Toute l'aide les gars?

javascriptjqueryioseventsscroll
47
Franky Chanyau

Avec jQuery:

$('body').bind('touchmove', function(e) { 
    console.log($(this).scrollTop()); // Replace this with your code.
});

Cela devrait vous donner un flux cohérent de la valeur scrollTop lorsque l'utilisateur fait défiler, mais soyez prudent car il va se déclencher même lorsque l'utilisateur tient juste son doigt sur l'écran.

Notez que si vous utilisez jQuery> = 1.7, la méthode de liaison préférée est .on() au lieu de la méthode .bind() que j'ai utilisée dans mon exemple. Dans ce cas, mon exemple serait

$('body').on({
    'touchmove': function(e) { 
        console.log($(this).scrollTop()); // Replace this with your code.
    }
});

Source: https://github.com/dantipa/pull-to-refresh-js/blob/master/jquery.plugin.pullToRefresh.js

94
Thanos Siopoudis

peut-être pourriez-vous jeter un coup d'œil à la façon dont iScroll le fait dans sa méthode _move - qui est liée à l'événement touchmove: https: // github .com/cubiq/iscroll/blob/master/src/core.js # L152

C'est un peu compliqué mais je suis sûr que vous allez vous en sortir. Vous pouvez également simplement utiliser iScroll pour commencer et lier à leur événement scrollmove (je ne sais pas comment cela s'appelle sur iScroll 5 mais c'était onScrollMove dans iScroll 4). that.y Vous donnera alors la valeur correcte.

4
urz0r

Je devais suivre la route iScroll pour le faire. J'ai écrit mon implémentation ici: https://stackoverflow.com/a/23140322/229315

1
Melinda Weathers