IScroll Don't scroll content, just bounce back

Question

I read a bunch of forums about this, but no one solved my problem. I'm sure something small is missing

Here is the initialization of iscroll:

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

Answer 1

The problem was that on the first page load, no parent div class set to "none" could be set. So I set "pi_panel large" to display: "block";

Answer 2

Make sure that the height of the container exceeds the height of the wrapper, i.e. does not height:100% . For example, if the shell contains a container and there are 10 divs in the container:

If each of the divs is 100px, the shell can be 150px. Then the container should be 1000px (not 100%!)

Answer 3

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

Answer 4

To get around the "div display none" problem, follow these steps after loading the data into your grid, div, etc.:

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

Where is myScroll loaded:

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

Answer 5

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

Answer 6

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

Below is the CSS that finally fixed this problem 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 this helps!

Answer 7

Another solution that works for me is to wrap the init iScroll function with setTimeout. This will give some time for the browser to display the item before applying iScroll.