CODEWITHSUNDEEP
jqueryioscsshtmlcordova
Dancer
Dancer

Reputation: 17651

iScroll4 js within IOS HTML5 app - scroll to top issue

I'm trying to build a fairly complicated HTML5 IOS app - it has a layout similar to Facebook (3 panels - swipe left or right to reveal settings/notification). The central panel contains 5 'pages' which are simply hidden divs hidden/revealed via a simple script.

so as a brief overview my layout is - 

 <div class="settings">
    Settings Info....

 </div>
 <div class="mainpage">
    <div id="wrapper">
       <div id="scroller">
          <div class="bookings">
            bookings info 
          </div>
          <div class="clientsList">
            clients info
          </div>          
          <div class="shop">
             shop info
          </div>
          <div class="training">
             training info
          </div>
         </div>
     </div>
 </div>
 <div class="notifications">
    notifications info....

 </div>

My issue is that I need the revealed divs to scroll as they will contain dynamic content pulled from the server - I have tried using IScroll 4 to create a scroller around the 5 revealed divs - but whenever I reveal the pages they begin to scroll but then snap back up to the top - I guess this is because it cant work out the height of the Div's as they are hidden on load?

I have tried using the following script to reset the scroller when a page link is selected, so it would work out the height once the page has loaded - it works in the browser - but not on IOS! Very annoying - does anyone have any ideas for a alternate approach for either the scrolling Div or the page navigation?

    function updateMyscroll(){
        myScroll.destroy();
        myScroll = null;
        myScroll = new iScroll('wrapper');

        setTimeout(function() {
        myScroll.refresh();
        },0);

}

Cheers Paul

Upvotes: 0

Views: 412

Answers (2)

Dancer
Dancer

Reputation: 17651

I managed to solve my issue by creating a new version of the scroller once the page had loaded - using the following script - theres a slight delay on page load - but works great on ios 5+ on iphone 3,4,4s and 5 and Ipad.

var articleScroll
    var articleDefined =""
    function NewScrollArticle() {
        if (articleDefined == "added"){
        blogScroll.destroy();
        alert('added')
       articleScroll = null;
       }
        articleScroll = new iScroll('articleBlog',{checkDOMChanges: false,
                      topOnDOMChanges: false});
        setTimeout(function(){blogDefined ="added"},2000);            

        }

Upvotes: 0

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

I've had similar issues with iScroll. These are usually solved by strictly following the information provided in iScroll's homepage

At first I suggest updating the structure to UL-LI format:

<div id="wrapper">
  <div id="scroller">
    <ul>
      <li class="bookings">bookings info</li>
    .
    .
    .

I'd also declare position:relative for #wrapper

The things you're doing with function updateMyscroll() seems correct to me, except I'd also try targeting to scroller instead of wrapper.

Upvotes: 1

Related Questions