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

Question

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

Demandé el 25 de Septembre, 2016: Quand la question a-t-elle été
5348 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Si j'utilise -webkit-overflow-scrolling pour un div défilant, il défile parfaitement avec le momentum natif. Mais, la div elle-même se fige parfois et ne répond pas aux mouvements de mon doigt. Après 2-3 secondes, elle redevient défilable.

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

Premièrement, si j'attends un certain temps, par exemple 20 secondes, et que je touche le div, il ne répond pas. J'attends quelques secondes, et elle fonctionne à nouveau.

Deuxièmement, je touche plusieurs fois rapidement, et ensuite, il se fige, et de nouveau, après quelques secondes plus tard, il recommence à fonctionner.

Comment puis-je éviter ce gel ?

Demandé el 25 de Septembre, 2016 par Adem

1 votes

Pouvez-vous essayer de forcer l'accélération matérielle ? Par exemple, si la classe de votre scrolling div en element utiliser .element > * { -webkit-transform: translateZ(0px); } dans votre CSS.

Commenté el 3 de Octobre, 2016 par Gökhan Kurt

6 votes

Pouvez-vous montrer votre code ? Ou un lien vers la page où se trouve le problème ?

Commenté el 7 de Octobre, 2016 par Narek-T

0 votes

Cela se produit-il sur tous les appareils ? Ou y a-t-il un appareil/navigateur spécifique pour lequel vous rencontrez ce problème ?

Commenté el 7 de Octobre, 2016 par Edmar Miyake

Afficher 9 autres commentaires

Answer 1

5 Réponses

Answer 2

16voto

Wesley Reitzfeld Points 59

Pour moi, le gel était répétable et se produisait lorsque j'essayais de faire défiler vers le haut ou vers le bas alors que j'étais déjà en haut ou en bas, respectivement. La solution a été d'ajouter des écouteurs pour touchstart y touchmove et détecter ces cas et event.preventDefault() sur eux.

Quelque chose comme ce qui suit, où .scroller est la div qui défilera réellement (elle se transforme 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 bug ! Bonne chance et continuez à vous battre !

Répondu el 7 de Août, 2018 par Wesley Reitzfeld (59 Points )

3 votes

Voici la solution de contournement qui a finalement fonctionné pour moi ! Ouvrez dans iOS Safari le exemple concret et consultez son code . Le seul inconvénient est l'absence glitchy de l'effet de rebond lorsqu'il est déjà en haut/bas, mais c'est acceptable et semble être la meilleure option que nous ayons jusqu'à ce que les mainteneurs de WebKit corrigent le bug.

Commenté el 8 de Août, 2018 par Mike

0 votes

@wesley , savons-nous pourquoi cela se produit, comme dans ce gel lorsque seulement en haut ou en bas.

Commenté el 26 de Septembre, 2018 par whyAto8

1 votes

@whyAto8 iOS Safari bug ¯_()_/¯, probablement lié à la façon dont il "rebondit" quand il est en haut et en bas. Le fait d'être déjà là déclenche probablement l'effet de rebond et l'absence de réponse jusqu'à ce qu'il soit terminé, mais comme vous êtes déjà là, il y a juste un bug.

Commenté el 27 de Septembre, 2018 par Wesley Reitzfeld

Afficher 6 autres commentaires

Answer 3

9voto

Leon Gurbanov Points 13

Essayez d'utiliser overflow: hidden sur le corps. Cela devrait résoudre le problème : https://codepen.io/cppleon/pen/vYOgKzX

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <div id="scrollable-content">
      <div class="site-header"></div>
      <div class="main-content"></div>
    </div>
  </body>
</html>

CSS

body {
  /* magic is here */
  overflow: hidden;
}

#scrollable-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: gray;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.site-header {
  width: 100%;
  height: 120px;
  background-color: orange;
}

.main-content {
  height: 200%;
}

Répondu el 24 de Février, 2020 par Leon Gurbanov (13 Points )

Answer 4

5voto

Pritish Vaidya Points 10616

Il s'agit d'un problème ouvert dont le lien se trouve ici problème dans ios

L'un des Solutions à ce problème peut être trouvée ici dans ce lien GitHub github

Selon les problèmes trouvés dans les liens GitHub postés ci-dessus - Quelques étapes peuvent être tracées pour supprimer le problème de défilement.

Commentaire les deux lignes suivantes dans le fichier ionic.js

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

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

Utilice cordova.plugins.Keyboard.disableScroll(true) pour le défilement pour parcourir le clavier sans interruption
$ionicConfigProvider.scrolling.jsScrolling(true) Définissez cette valeur à true dans la partie configuration.
En outre, dans certaines circonstances, overflow-scroll est défini comme "caché" mais n'est plus défini comme "défilement", ce qui fige l'écran.

J'espère que cela pourra vous aider.

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

/* Je déclare par la présente que l'attribution complète doit être donnée aux pages publiées sur github indiquées dans le lien ci-dessus*/.

Répondu el 14 de Octobre, 2016 par Pritish Vaidya (10616 Points )

Answer 5

4voto

Aarbel Points 1

Solution stable

Après plusieurs jours à essayer de le réparer, j'ai vu que le problème vient de la fixation body élément 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 fixé et que vous rencontrez un bug de gel du défilement, si vous inspectez le corps avec Desktop Safari sur votre appareil iOS, vous pouvez voir qu'il se déplace "artificiellement"... oui, un truc webkit...

J'ai essayé toutes les solutions listées sur cette menace mais aussi sur github problèmes similaires. Aucune ne fonctionne.

La seule solution stable pour moi est d'utiliser ce package : blocage du défilement du corps y retirer le fixed sur votre body élément . En ce moment, vous pouvez tous deux profiter de la correction du corps et de l'absence de bugs de gel du défilement.

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

Répondu el 24 de Novembre, 2018 par Aarbel (1 Points )

0 votes

Comment utilisez-vous exactement le verrouillage du corps pour éviter le gel ?

Commenté el 25 de Février, 2019 par Jette

0 votes

Je l'applique à chaque élément défilant

Commenté el 7 de Mars, 2019 par Aarbel

Answer 6

2voto

Kenneth Chan Points 165

J'ai utilisé le code ci-dessous qui, je pense, 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);
});

Répondu el 24 de Août, 2018 par Kenneth Chan (165 Points )

1 votes

Wow : ça marche vraiment pour moi jusqu'à présent. Ce serait bien de savoir comment vous y êtes parvenu.

Commenté el 25 de Juin, 2019 par everyday productive

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: