jQuery Mobile et iScroll Problème

Si j'avais trouvé une bonne solution pour résoudre les fixes en-tête et pied de page problème de jquery mobile qui est le iscoll de la bibliothèque. Pour obtenir le iscroll bibliothèque pour travailler avec jquery mobile, je suis à l'aide de cette troisième partie du script: https://github.com/yappo/javascript-jquery.mobile.iscroll

Tout fonctionne bien pour mes pages de liste (à l'aide de jquery mobile affichage de la liste). Mon annonce pages sont chargées dynamiquement à l'aide d'ajax. Mais ensuite, quand j'ai créé une page des détails du produit qui est censé les faire défiler, il ne fonctionne pas du tout. Dans certains cas, je ne pouvais pas faire défiler à tous. Dans certains autres cas, le défilement se comporte comme une bande de caoutchouc en effet, il vous amène toujours à nouveau vers le haut à nouveau. Mais, l'en-tête et pied de page les barres de navigation sont fixes, comme ce que je veux être.

Donc, ici, c'est le scénario. J'ai une page d'inscription (avec défilement), lorsque vous cliquez sur un élément de la liste, vous devriez voir le produit en détail sur une page différente. Le iscroll est déclenchée sur pagebeforeshow événement comme vous pouvez le voir à l'intérieur de la yappo script. Voici le template de ma page détaillée du produit. Le contenu sera chargé dynamiquement et ajouté à la barre de défilement, div.

<!-- PROMOTION DETAIL PAGE -->
  <div data-role="page" id="page-promotion-detail" data-iscroll="enable"> 
      <div class="header" data-role="header">
          <div class="sub-header-bg">
              <div class="title"></div>
              <a href="#" id="Back" data-rel="back" class="btn-header-left btn-back"><span>Back</span></a>
              <a href="#" id="Edit" class="btn-header-right btn-edit hidden"><span>Edit</span></a>
          </div>
      </div>
      <div class="content" data-role="content" data-theme="anz">
          <div data-iscroll="scroller" class="scroller">
              <div data-iscroll="scroller"></div>
          </div>
          <input type="hidden" id="paramPromotionID" name="paramPromotionID" value="" />
      </div>
      <div class="footer" data-id="footer" data-role="footer">
          <div data-role="navbar">
              <ul>
                  <li><a id="menuHome" href="#page-home" class="footer-icon footer-icon-home">Home</a></li>
                  <li><a id="menuMySpot" href="#page-myspot" class="footer-icon footer-icon-spot">My Spot</a></li>
                  <li><a id="menuOtherCountries" href="#page-other-countries" class="footer-icon footer-icon-country">Others</a></li>
                  <li><a id="menuSearch" href="#page-search" class="footer-icon footer-icon-search">Search</a></li>
              </ul>
          </div>
      </div>
  </div>

Quelqu'un sait ici ce que j'ai manqué ou n'importe qui de vous les gars a réussi à obtenir iscroll pour fonctionner parfaitement avec jQuery Mobile?

Je suis à l'aide de jQuery Mobile beta 3 et iScroll 3.7.1.

Acclamations

InformationsquelleAutor ronanray | 2011-09-24
  1. 1

    Sans regarder le réel de l'application est difficile de dire ce que la solution pourrait être. Dans le passé, j'ai remarqué que les questions suivantes lors de l'utilisation de iScroll et jQuery Mobile:

    • Si le contenu à l'intérieur de la zone déroulante a la règle CSS "flotter", iScroll ne sera pas en mesure de déterminer la hauteur du contenu. iScroll pense qu'il n'y a rien à faire défiler. De sorte que vous pouvez avoir besoin de vérifier les règles CSS appliquées au contenu défilant.
    • jQuery Mobile lie automatiquement événement tactile pour certains éléments. Lors de la combinaison de iScroll avec jQuery Mobile, il pourrait être une bonne idée de lier une fonction distincte de la " touchmove de l'événement et de prévenir les cas de remontée ( événement.preventDefault() ). En faisant cela, jQuery Mobile ne sera pas en mesure de gérer l'événement de touche, tandis que les utilisateurs interagissent avec la iScroll élément.

    Ce sont génériques recommandation, mais j'espère qu'ils pourront vous aider. J'ai écrit un peu de jQuery extension pour intégrer jQuery avec iScroll. Vous pouvez l'obtenir:

    http://appcropolis.com/blog/jquery-wrapper-for-iscroll/

    InformationsquelleAutor appcropolis
  2. 0

    Je creuse plus profondément dans la iScroll de la documentation et j'ai trouvé que j'ai besoin de rafraîchir la iscroll objet à chaque fois que le DOM changé. Ceci est nécessaire car il doit recalculer la hauteur /largeur après les modifications.

    Je devrais viens d'apprendre Objective-C...en essayant de créer des applications en utilisant le HTML est tout simplement trop de tracas..au moins pour l'instant.

    • pour faire la fine ronranray dit: définir la myScroll - variable à l'échelle mondiale et ensuite appeler par l'intermédiaire de myScroll.refresh()
    InformationsquelleAutor ronanray
  3. 0

    En HTML5, en fonction de l'application, le défilement doux est toujours un défi. Il y a des tiers bibliothèques disponibles pour mettre en œuvre lisse barre de défilement, mais il y a de la mise en œuvre est très complexe. Dans cette roue de la bibliothèque, l'utilisateur a seulement besoin d'ajouter de défilement=true attribut dans le défilement de la division, alors que la div défiler comme bon natif de scroller. Veuillez lire readme.doc déposer d'abord pour commencer à travailler sur elle

    lien de la bibliothèque

    http://github.com/ashvin777/html5

    Avantages :
    1 Pas besoin de la créer manuellement barre de défilement de l'objet.
    2 Scroller automatiquement actualisé dans le cas de toutes les données à modifier dans la barre de défilement.
    3 Donc, pas besoin de rafraîchir manuellement.
    4 Imbriquée Défilement de contenu aussi possible avec l'absence de double défilement question.
    5 Fonctionne pour tous les moteurs webkit.
    6 Dans le cas si l'utilisateur veut accéder à cette barre de défilement de l'objet, alors il peut accéder en écriture “SElement.scrollable_wrapper”. scrollable_wrapper est l'id de l'défilement de la division qui est défini dans le code html de la page.

    InformationsquelleAutor Ashvin777