web-dev-qa-db-fra.com

Le défilement div se fige parfois si j'utilise -webkit-overflow-scrolling

si j'utilise -webkit-overflow-scrolling pour un div à défilement, il défile parfaitement avec l'élan natif. Mais, div se fige parfois et ne répond pas que mon doigt bouge. Après 2-3 secondes plus tard, il redevient déroulant. 

Je ne sais pas comment je reproduis ce problème. Mais, comme je vois, il y a deux comportements principaux qui créent cette situation. 

Tout d’abord, si j’attends un instant, par exemple, 20 secondes, et que je touche le div, il ne répond pas. J'attends quelques secondes et ça recommence à fonctionner.

Deuxièmement, je touche plusieurs fois rapidement, puis il commence à geler, puis quelques secondes plus tard, il recommence à fonctionner.

Comment puis-je empêcher ce gel?

ioscsssafariwebkit
36
Adem

Pour moi, le gel était répétable et se produisait lorsqu’on essayait de faire défiler vers le haut ou vers le bas quand on était déjà en haut ou en bas, respectivement. Le correctif consistait à ajouter des écouteurs pour touchstart et touchmove et à détecter ces cas et event.preventDefault() on ’em.

Quelque chose comme ce qui suit, où .scroller est le div qui défilera réellement (change en scrollTop).

var lastY = 0; // Needed in order to determine direction of scroll.
$(".scroller").on('touchstart', function(event) {
    lastY = event.touches[0].clientY;
});

$('.scroller').on('touchmove', function(event) {
    var top = event.touches[0].clientY;

    // Determine scroll position and direction.
    var scrollTop = $(event.currentTarget).scrollTop();
    var direction = (lastY - top) < 0 ? "up" : "down";

    // FIX IT!
    if (scrollTop == 0 && direction == "up") {
      // Prevent scrolling up when already at top as this introduces a freeze.
      event.preventDefault();
    } else if (scrollTop >= (event.currentTarget.scrollHeight - event.currentTarget.outerHeight()) && direction == "down") {
      // Prevent scrolling down when already at bottom as this also introduces a freeze.
      event.preventDefault();
    }

    lastY = top;
});

J'espère que cela aidera la prochaine pauvre âme qui rencontrera cet horrible insecte! Bonne chance et continuez à vous battre!

5
Wesley Reitzfeld

Ceci est un numéro ouvert dont le lien se trouve ici numéro dans ios

Une des solutions à ce problème peut être trouvée ici dans ce lien GitHub github

Selon les problèmes rencontrés dans les liens GitHub publiés ci-dessus - Il est possible de suivre quelques étapes pour éliminer le problème de défilement.

  • Comment sur les deux lignes suivantes du ionic.js

    self.el.style.overflowY = 'hidden';

self.el.style.overflowX = 'hidden';

  • Utilisez cordova.plugins.Keyboard.disableScroll(true) pour faire défiler Le clavier sans interruption

  • $ionicConfigProvider.scrolling.jsScrolling(true) Définissez ceci sur true dans la partie config.

  • Aussi Dans certaines circonstances, overflow-scroll est réglé sur "caché" mais n'est plus redéfini sur "scroll", ce qui provoque le gel de l'écran. 

J'espère que cela peut vous aider.

/ * Mesures nécessaires pour moi, cela exclut la réponse * /

/ * J'affirme par la présente l'attribution complète aux pages postées par github indiquées dans le lien ci-dessus * /

5
Pritish Vaidya

Solution stable

Après plusieurs jours pour essayer de le réparer, j'ai constaté que le problème venait de l'élément body corrigé, peut-être parce que vous ne voulez pas que vos utilisateurs voient le corps de votre page rebondir lorsque le défilement est bloqué: cf cet exemple . Lorsque le corps est réparé et que vous rencontrez un bogue d'arrêt du défilement, si vous inspectez le corps avec Desktop Safari sur votre périphérique iOS, vous pouvez voir que le mouvement est "artificiel" ... oui, quelque chose dans le Webkit. ..

J'ai essayé toutes les solutions énumérées sur cette menace, mais aussi sur des problèmes similaires à github. Personne ne travaillait.

Le seul correctif stable pour moi est d'utiliser ce paquetage: body-scroll-lock et supprimer la fixed sur votre élément body. À l’heure actuelle, vous pouvez profiter à la fois d’un corps fixe et d’aucun bogue gelant qui défile.

J'espère que cela aidera les personnes qui créent actuellement des applications Web progressives sur IOS.

0
Aarbel

J'ai utilisé le code ci-dessous, je pense que fonctionne. 

var scrollTimer;
$('.scroller').on('scroll',function(e){
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(() => {
        this.scrollTop = Math.max(1, Math.min(this.scrollTop, this.scrollHeight - this.clientHeight - 1));
      }, 300);
});
0
Kenneth Chan