JQuery Mobile and iScroll Problem

cordovajqueryjquery-mobile

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

Best Answer

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/

Related Topic