jQuery Mobile and iScroll Problem

Question

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

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.

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>

Anyone here knows what i missed out or anyone of you guys managed to get iscroll to work perfectly with jQuery Mobile?

I'm using jQuery Mobile beta 3 and iScroll 3.7.1.

Cheers

Answer 1

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:

• If the content inside the scrollable area has the CSS rule 'float' iScroll will not be able to determine the height of the content. iScroll will think that there is nothing to scroll. So you may need to check the CSS rules applied to the scrollable content.
• jQuery Mobile automatically binds touch event to some elements. When combining iScroll with jQuery Mobile it might be a good idea to bind a separate function to the 'touchmove' event and prevent the event from bubbling up ( event.preventDefault() ). By doing this jQuery Mobile will not be able to handle the touch event while users are interacting with the iScroll element.

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/

Answer 2

In HTML5 based application, smooth scrolling is always challenging. There are third parties libraries available to implement smooth scroller but there implementation is very complex. In this scroller library, user only need to add scrollable=true attribute in the scrollable division, then that div will scroll like smooth native scroller. Please read readme.doc file first to start working on it

library link

http://github.com/ashvin777/html5

Advantages : 1 No need the manually create scroller object. 2 Scroller will automatically refreshed in case of any data being changed in the scroller. 3 So no need to refresh manually. 4 Nested Scrolling content also possible with no dual scrolling issue. 5 Works for all webkit engines. 6 In case if user wants to access that scroller object then he can access it by writing “SElement.scrollable_wrapper”. scrollable_wrapper is id of the scrollable division which is defined in the html page.

Answer 3

I dig deeper into the iScroll documentation and I found out that I need to refresh the iscroll object everytime the DOM changed. This is required because it needs to recalculate the actual height / width after the changes.

I should've just learn Objective-C...trying to build apps using HTML is simply too much hassle..at least for now.