Question

所以我找到了一个很好的解决方案来解决jquery mobile中iscurl库的固定页眉和页脚问题。要使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

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

如果可滚动区域内的内容具有CSS规则“浮动”，则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 2

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

我应该只学习Objective-C ...尝试使用HTML构建应用程序简直太烦人了......至少现在。

Answer 3

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

图书馆链接

http://github.com/ashvin777/html5

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

jQuery Mobile和iScroll问题

3 个答案: