jQuery Mobile 和 iScroll 问题

Question

所以我找到了一个很好的解决方案来解决 jquery mobile 中的固定页眉和页脚问题，即 iscoll 库。为了让 iscroll 库与 jquery mobile 一起使用，我使用了这个第三方脚本： https://github.com/yappo/javascript-jquery.mobile.iscroll

对于我的列表页面（使用 jquery 移动列表视图），一切正常。我的列表页面是使用 ajax 动态加载的。但是，当我创建一个应该滚动的产品详细信息页面时，它根本不起作用。在某些情况下，我根本无法滚动。在某些其他情况下，滚动的行为就像橡皮筋效果，它总是让您再次回到顶部。但是，页眉和页脚导航栏已按照我想要的方式固定。

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

我正在使用 jQuery Mobile beta 3 和 iScroll 3.7.1。

干杯

Answer 1

在基于 HTML5 的应用程序中，平滑滚动总是具有挑战性。有第三方库可用于实现平滑滚动器，但实现非常复杂。在这个滚动条库中，用户只需要在可滚动分区中添加scrollable=true属性，那么该div就会像平滑的原生滚动条一样滚动。请先阅读 readme.doc 文件以开始处理它

库链接

http://github.com/ashvin777/html5

优点：
1 无需手动创建滚动条对象。
2 如果滚动条中的任何数据发生更改，滚动条将自动刷新。
3 所以不需要手动刷新。
4 嵌套滚动内容也是可能的，没有双重滚动问题。
5 适用于所有 webkit 引擎。
6 如果用户想要访问该滚动条对象，则可以通过编写“SElement.scrollable_wrapper”来访问它。 scrollable_wrapper 是在 html 页面中定义的可滚动分区的 id。

Answer 2

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

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

这是一般性的建议，但我希望它们可以帮助你。我编写了一个小的 jQuery 扩展来将 jQuery 与 iScroll 集成。您可以在以下位置获取它：

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

Answer 3

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

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