jQuery Mobile 和 iScroll 问题

Question

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

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

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

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

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

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

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

Answer 2

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

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

Answer 3

在基于 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。