Le défilement mobile JQuery n'est pas fluide sur iOS

J'ai un multi-page application écrite avec JQuery 1.4, affichée en iOS WebView. Il utilise un en-tête statique et le contenu a 20 ou si les divs avec des images incorporées et le texte. Je ne suis pas à l'aide de PhoneGap.

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

Est-il un réglage ou une question je ne sais pas quand il s'agit de défilement lisse de contenu en JQuery Mobile?

source d'informationauteur dixkin

  1. 18

    Je pense que cela a à voir avec le fait que vous n'êtes plus du défilement de la <body> élément, mais plutôt un JQuery Mobile Page <div>. Si vous faites une <div> défilant sans JQuery Mobile, vous devriez être en mesure de reproduire ce agitée de l'expérience.

    Ce que vous cherchez est en fait appelé le défilement dynamique et est parfois aussi appelée le défilement à inertie.

    Soi-disant, vous devriez être en mesure d'ajouter de la propriété css -webkit-overflow-scrolling: touch; à la div vous souhaitez ajouter le défilement dynamique et cela devrait fonctionner, mais je n'ai pas été en mesure d'obtenir que cela fonctionne sur la Page <div>. J'ai essayé de l'ajouter pour le corps et j'ai été en mesure d'obtenir le droit de défilement, mais mon en-tête fixe commencé à sauter partout pendant que j'étais défilement.

    Si vous ne disposez pas d'un en-tête fixe, n'hésitez pas à donner un coup de feu.

    body {
    -webkit-overflow-scrolling: touch;    
}
  2. 3

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

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

    Fixe le défilement de l'erreur pour nous.

    overflow-x: hidden gâché les choses.

  3. 0

    Peut-être le problème, c'est qu'il prend beaucoup de puissance de traitement à la peinture de ces images/vrd. Avez-vous compresser vos fichiers?

    Vous pouvez lire ici pour plus d':

    De Compression D'Image
    http://www.html5rocks.com/en/tutorials/speed/img-compression/
    **faites défiler vers le bas pour les liens vers les applications que vous pouvez utiliser

    CSS Peinture Cause parfois des Problèmes
    http://www.html5rocks.com/en/tutorials/speed/css-paint-times/
    **assurez-vous de cliquer sur le lien "Continue de Peinture Times" en bas pour voir comment le profil de la peinture de fois.

    Espérons que cette aide!

  4. 0

    Vous pouvez essayer d'utiliser Dave Taylor jquery cinétique de la bibliothèque pour ajouter un peu de défilement de l'activité conteneurs:
    http://davetayls.me/jquery.kinetic/

  5. 0

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

    Installation:

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

    Utilisation:

    $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);

    Ici est la référence pour nicescroll plugin