jQuery Mobile和iScroll问题 [英] jQuery Mobile and iScroll Problem
问题描述
所以我发现了一个很好的解决方案来解决固定的页眉和页脚问题在jquery移动，这是iscoll库。要使iscroll库与jquery mobile一起使用，我使用的是第三方脚本： https://github.com/yappo/javascript-jquery.mobile.iscroll
So I had found a good solution to solve the fixed header and footer problem in jquery mobile which is the iscoll library. To get the iscroll library to work with the jquery mobile, I'm using this third party script: https://github.com/yappo/javascript-jquery.mobile.iscroll
一切都适用于我的商品页面（使用jquery移动列表视图）。我的列表页面使用ajax动态加载。但是，当我创建一个应该滚动的产品详细信息页面，它根本没有工作。在某些情况下，我不能滚动。在其他一些情况下，滚动行为像橡皮筋效果，它总是带你回到顶部。但是，页眉和页脚导航栏是固定的，因为我想要的。
Everything works just fine for my listing pages (using jquery mobile list view). My listing pages are loaded dynamically using ajax. But then, when I created a product detail page that is supposed to scroll, it didn't work at all. In some cases, I couldn't scroll at all. In some other cases, the scrolling behaves like rubber band effect, it always brings you back to the top again. But, the header and footer navigation bars are fixed as what I want it to be.
所以，这里是场景。我有一个列表页面（滚动），当您点击任何列表项时，您应该在不同的页面上看到产品详细信息。 iscroll在pagebeforeshow事件上触发，你可以在yappo包装器脚本中看到。这是我的产品详细信息页面的模板。内容将被动态加载并附加到滚动器div。
So, here is the scenario. I have a listing page (with scrolling), when you click on any list item, you should see the product detail on a different page. The iscroll is triggered on pagebeforeshow event as you can see inside the yappo wrapper script. Here is the template of my product detail page. The content will be dynamically loaded and appended to the 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完美地工作移动？
Anyone here knows what i missed out or anyone of you guys managed to get iscroll to work perfectly with jQuery Mobile?
我使用的是jQuery Mobile beta 3和iScroll 3.7.1。
I'm using jQuery Mobile beta 3 and iScroll 3.7.1.
>
推荐答案
没有看到实际的应用程序很难说明解决方案可能是什么。在过去，我注意到使用iScroll和jQuery Mobile时的以下问题：
Without looking at the actual application is hard to tell what the solution might be. In the past I noticed the following issues when using iScroll and jQuery Mobile:
- 如果可滚动区域内的内容有CSS规则'float 'iScroll将无法确定内容的高度。 iScroll会认为没有什么可滚动。因此，您可能需要检查适用于可滚动内容的CSS规则。
- jQuery Mobile会自动将触摸事件绑定到某些元素。当将iScroll与jQuery Mobile结合时，将单独的函数绑定到touchmove事件并防止事件冒泡（event.preventDefault（））可能是一个好主意。通过这样做，当用户与iScroll元素交互时，jQuery Mobile将无法处理触摸事件。
这是通用的建议，但我希望他们能帮助你。我写了一个小jQuery扩展来集成jQuery与iScroll。您可以在以下网址取得：
This are generic recommendation, but I hope they can help you. I wrote a little jQuery extension to integrate jQuery with iScroll. You can get it at:
http://appcropolis.com/blog/jquery-wrapper-for-iscroll/
这篇关于jQuery Mobile和iScroll问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
