jquerymobile和iScroll问题

因此，我找到了一个很好的解决办法来解决jQueryMobile中的固定页眉和页脚问题，这就是iColl库。为了让iscroll库与jquery mobile配合使用，我使用以下第三方脚本：

对于我的列表页面，一切都很好（使用jquery移动列表视图）。我的列表页面是使用ajax动态加载的。但是，当我创建一个应该滚动的产品详细信息页面时，它根本不起作用。在某些情况下，我根本无法滚动。在其他一些情况下，滚动的行为就像橡皮筋效果一样，它总是让你再次回到顶端。但是，页眉和页脚导航栏是固定的，正如我所希望的那样

所以，这里是一个场景。我有一个列表页面（带滚动），当你点击任何列表项时，你应该在另一个页面上看到产品的详细信息。正如您在yappo包装器脚本中看到的那样，在pagebeforeshow事件上触发iscroll。这是我的产品详细信息页面的模板。内容将动态加载并附加到scroller 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>

这里有人知道我漏掉了什么，或者你们中有人设法让iscroll与jQuery Mobile完美配合吗

我正在使用jquerymobilebeta3和iscroll3.7.1

---

干杯

我深入研究了iScroll文档，发现每次DOM更改时都需要刷新iScroll对象。这是必需的，因为更改后需要重新计算实际高度/宽度

---

我应该学习Objective-C…尝试使用HTML构建应用程序实在太麻烦了…至少现在是这样

如果不查看实际应用程序，很难判断解决方案可能是什么。过去，我在使用iScroll和jQuery Mobile时注意到以下问题：

• 如果可滚动区域内的内容具有CSS规则“float”，iScroll将无法确定内容的高度。iScroll会认为没有什么东西可以滚动。因此，您可能需要检查应用于可滚动内容的CSS规则
• jQuery Mobile自动将触摸事件绑定到某些元素。将iScroll与jQuery Mobile结合使用时，最好将单独的函数绑定到“touchmove”事件，并防止事件冒泡（event.preventDefault（））。这样，当用户与iScroll元素交互时，jQuery Mobile将无法处理触摸事件

这是一般性的建议，但我希望它们能帮助你。我编写了一个小小的jQuery扩展来集成jQuery和iScroll。您可以在以下网址获得：

---

在基于HTML5的应用程序中，平滑滚动始终是一项挑战。有第三方库可用于实现smooth scroller，但实现非常复杂。在这个scroller库中，用户只需要在scrollable分区中添加scrollable=true属性，那么该分区将像smooth native scroller一样滚动。请先阅读readme.doc文件，然后开始处理它

图书馆链接

优点： 1无需手动创建滚动条对象。 2如果滚动条中的任何数据发生更改，滚动条将自动刷新。 3因此无需手动刷新。 4嵌套滚动内容也可能没有双重滚动问题。 5适用于所有webkit引擎。

---

6如果用户想要访问滚动器对象，那么他可以通过编写“SElement.scrollable_wrapper”来访问它。scrollable_wrapper是html页面中定义的可滚动分区的id。

要进行精简，RonRaray说：全局定义myScroll-变量，然后通过myScroll.refresh（）调用它