iScroll Not scrolling content, just bounces back to top

Question

I have read a bunch of forums on this but none have solved my problem. I'm sure its something small I'm missing

Here is iscroll initialization:

// make PI scroll
piScroll2 = new iScroll('pi_scroll2');

Here is my css:

.pi_panel.large .content{
position: absolute;
width: 963px;
height: 616px;
top: 65px;
left:30px;
background:none;
/*background:url(../images/ISI_body.png) repeat-y;*/
overflow:scroll;
    -webkit-border-radius: 0px;

}

#FullPiWrapper
{
   position:relative; 
   z-index: 1; 
   overflow:hidden; 
   top: 60px; 
   width:980px;
   height: 610px;
}

.pi_panel .pi_box{
padding: 0px;
margin: 20px 0px;

}

Here is my html:

<!-- BEGIN:   PI PANEL LARGE -->
    <div class="pi_panel large">
     <div class="topBarPiFull">
                <div class="title">Full Prescribing Information</div>
                <div class="close_button_fullpi">Close</div>
                <div class="annotated_pi_button">Annotated PI</div>
            </div>
<!--            <div class="popContent"></div>-->
          <div class="content" id="FullPiWrapper">

                <div id="pi_scroll2">


                    <div class="pi_box" >
                        <img src="_globals/images/PI/pi_1.png"/>
                        <img src="_globals/images/PI/pagebreak.png" />
                        <img src="_globals/images/PI/pi_2.png"/>
                        <img src="_globals/images/PI/pagebreak.png" />
                        <img src="_globals/images/PI/pi_3.png"/>
                        <img src="_globals/images/PI/pagebreak.png"/>
                        <img src="_globals/images/PI/pi_4.png"/>
                        <img src="_globals/images/PI/pagebreak.png"/>
                        <img src="_globals/images/PI/pi_5.png"/>
                        <img src="_globals/images/PI/pagebreak.png" />
                        <img src="_globals/images/PI/pi_6.png"/>
                        <img src="_globals/images/PI/pagebreak.png" />
                        <img src="_globals/images/PI/pi_7.png"/>
                        <img src="_globals/images/PI/pagebreak.png" />
                        <img src="_globals/images/PI/pi_8.png"/>
                        <img src="_globals/images/PI/pagebreak.png" />
                        <img src="_globals/images/PI/pi_9.png"/>
                        <img src="_globals/images/PI/pagebreak.png" />
                        <img src="_globals/images/PI/pi_10.png"/>
                    </div>
                 </div>

            </div>
     </div>
    <!-- END:   PI PANEL LARGE -->

Globetrotter

Answer 1

Issue was, you cannot have ANY parent's div class display set to 'none' when the page first loads. So I set 'pi_panel large' to display: 'block';

Globetrotter

Plus 1 from me. To add to your answer, iscroll's container element must be visible before iscroll is initialised. I just battled with iscroll on an ipad webapp, where all views are displayed dynamically. – Cater

** Also see the answer here for issues with iscroll 5: #25962595 – Globetrotter

Answer 2

Make sure that the container's height exceeds the wrapper's height i.e. don't make height:100%. For example, if the wrapper contains a container, and there are 10 divs in the container:

If Each of the divs is 100px the wrapper might be 150px. Then Container has to be 1000px (not 100% !)

Diva

Answer 3

give a height to your wrapper, it just worked for me.

.wrapper1 {
    position:absolute; z-index:1;
    top:250px; bottom:0px; left:3%;
    margin-left:25px;
    width:100%;
    background:none;
    overflow:auto;
    height:100px;
}

Leund

Answer 4

To get around the "div display none" issue, do the following after loading the data in your grid, div, etc:

            myScroll.refresh();
            myScroll.scrollTo(0, 0, 1000);

Where myScroll has been loaded:

var myScroll = new iScroll('friendsWrapperDrug', { desktopCompatibility: true, vScroll: true, hScroll: false, hScrollbar: false, lockDirection: true });

Lamination

Answer 5

myScroll.refresh();
myScroll.scrollTo(0, 0, 0);

Echopraxia

Answer 6

This problem occurs when you have a container div for your wrapper The fix for this is to set the height of the container to 99%.

Following is the CSS which finally fixed this issue for me:

#productsScreen{ /* my container */
    height: 99%;
    z-index: 1;
    top: 0px;
    left: 0;
    overflow: auto;
}
#productListWrapper{
    background:transparent;
    position:absolute; 
    z-index:1;
    top: 88px;
    bottom:49px; 
    left:0;
    width:100%;
    overflow:auto;
}
#productsListScroller {
    position:absolute; z-index:1;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    padding:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

Hope that helps!

Performative

Answer 7

Another solution that works for me is wrapping iScroll init function with setTimeout. This will give some time for the browser to render the element before iScroll is applied.

Scuff

this is a terrible idea. Do it on DOM ready or when you show the scroller (if you are changing visibility dynamically) – Kaleena