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