7

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

7 Answers 7

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

2
  • 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. Aug 15, 2012 at 9:23
  • ** Also see the answer here for issues with iscroll 5: stackoverflow.com/questions/25962095/…
    – Mike6679
    Sep 22, 2014 at 20:25
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% !)

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

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

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

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!

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

1
  • this is a terrible idea. Do it on DOM ready or when you show the scroller (if you are changing visibility dynamically) Jun 11, 2013 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.