web-dev-qa-db-fra.com

JQuery Mobile Scrolling pas lisse sur iOS

J'ai une application multi-pages écrite avec JQuery 1.4, affichée dans un WebView iOS. Il utilise un en-tête statique et le contenu contient environ 20 divs avec des images et du texte incorporés. Je n'utilise pas PhoneGap.

Dans WebView et dans Safari, je peux faire défiler le contenu verticalement, mais je n’obtiens pas la même fluidité que dans une application iOS (c’est-à-dire que le défilement continue un peu après que le doigt est apparu = " "défilement lisse"). Le défilement s'arrête juste quand mon doigt sort de l'écran.

Existe-t-il un paramètre ou un problème que je ne connais pas en matière de défilement régulier du contenu dans JQuery Mobile?

jqueryiossmooth-scrolling
12
dixkin

Je pense que cela a à voir avec le fait que vous ne faites plus défiler l'élément <body>, mais plutôt une page JQuery Mobile <div>. Si vous faites défiler un <div> sans JQuery Mobile, vous devriez pouvoir reproduire cette expérience saccadée.

Ce que vous recherchez est en fait appelé défilement du moment et est parfois également appelé défilement par inertie .

Soi-disant, vous devriez pouvoir ajouter la propriété css -webkit-overflow-scrolling: touch; au div auquel vous souhaitez ajouter un défilement dynamique et cela devrait fonctionner, mais je n’ai pas réussi à ce que cela fonctionne sur la Page <div>. J'ai essayé de l'ajouter au corps et j'ai pu obtenir le bon défilement, mais mon en-tête fixe a commencé à sauter lorsque je faisais défiler.

Si vous n'avez pas de tête fixe, n'hésitez pas à tenter le coup.

body {
    -webkit-overflow-scrolling: touch;    
}
20
Scott David Murphy

Pour nous, le problème était dans le CSS de jQuery Mobile, et nous l'avons corrigé comme ceci:

.ui-mobile .ui-page-active{display:block;overflow:visible;/*overflow-x:hidden*/}

Correction de l'erreur de défilement pour nous.

overflow-x: hidden a tout gâché.

3
EpicPandaForce

Peut-être le problème est-il qu'il faut beaucoup de puissance de traitement pour peindre ces images/divs. Avez-vous compressé vos fichiers?

Vous pouvez lire ici pour plus:

Compression d'image http://www.html5rocks.com/fr/tutorials/speed/img-compression/ ** Faites défiler vers le bas les liens vers les applications que vous pouvez utiliser.

Les temps de peinture CSS causaient des problèmes http://www.html5rocks.com/en/tutorials/speed/css-Paint-times/ ** assurez-vous de cliquer sur le lien "Temps de peinture continus" en bas pour voir comment. profiler les temps de peinture.

J'espère que cela t'aides!

0
dustinhorn

Vous pouvez essayer d’utiliser la bibliothèque cinétique jQuery de Dave Taylor pour ajouter une activité de défilement aux conteneurs: http://davetayls.me/jquery.kinetic/

0
user3011237

Vous pouvez probablement utiliser le plugin nicescroll qui fonctionne sur de nombreuses plateformes.

Installation: 

<script src="jquery.nicescroll.js"></script>

Utilisation: 

$(document).ready(

  function() { 

    $("html").niceScroll();

  }

);

Voici la référence pour nicescroll plugin

0
Shoaib Chikate