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 -->

score 10 · Accepted Answer · answered Jun 14 '12 at 02:44

10

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';

answered Jun 14 '12 at 02:44

Mike6679

5,547
19
63
108

2

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. – T. Junghans Aug 15 '12 at 09:23
** Also see the answer here for issues with iscroll 5: http://stackoverflow.com/questions/25962095/iscroll-5-not-working-when-2nd-page-should-be-scrollable – Mike6679 Sep 22 '14 at 20:25

score 5 · Answer 2 · edited Apr 08 '13 at 13:26

5

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% !)

edited Apr 08 '13 at 13:26

Cezar

55,636
19
86
87

answered Apr 08 '13 at 12:58

Vasdor

51
1
1

score 4 · Answer 3 · answered Jul 20 '12 at 06:24

4

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;
}

answered Jul 20 '12 at 06:24

AnhSirk Dasarp

701
2
20
38

score 1 · Answer 4 · answered Dec 05 '12 at 20:49

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 });

score 0 · Answer 5 · answered Jun 11 '13 at 20:48

0

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

answered Jun 11 '13 at 20:48

Brynner Ferreira

1,527
1
21
21

score -1 · Answer 6 · answered Aug 06 '13 at 19:12

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!

score -2 · Answer 7 · answered Dec 24 '12 at 09:17

-2

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.

answered Dec 24 '12 at 09:17

Marcin Baniowski

11
1

this is a terrible idea. Do it on DOM ready or when you show the scroller (if you are changing visibility dynamically) – Andrew Bullock Jun 11 '13 at 13:33

iScroll Not scrolling content, just bounces back to top

7 Answers7