iScroll Non scorre i contenuti, rimbalza solo all'inizio

Question

Ho letto un sacco di forum su questo, ma nessuno ha risolto il mio problema. Sono sicuro che la sua qualcosa di piccolo che mi manca

Ecco l'inizializzazione iscroll:

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

Ecco il mio 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; 

}

Ecco il mio 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

Il problema era che non è possibile che QUALSIASI display di classe div di un genitore sia impostato su "nessuno" quando la pagina viene caricata per la prima volta. Così ho impostato 'pi_panel large' per visualizzare: 'block';

Answer 2

dare un'altezza al tuo involucro, ha appena funzionato per 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 3

per aggirare il problema "div visualizzazione none", effettuare le seguenti operazioni dopo aver caricato i dati nella griglia, div, ecc:

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

Dove myScroll è stato caricato:

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

Answer 4

Un'altra soluzione che funziona per me è il wrapping della funzione init di iScroll con setTimeout. Ciò consentirà al browser di eseguire il rendering dell'elemento prima che venga applicato iScroll.

Answer 5

Assicurarsi che l'altezza del contenitore superi l'altezza dell'involucro, ovvero non effettuare height:100%. Ad esempio, se il wrapper contiene un contenitore e ci sono 10 div nel contenitore:

Se ognuno dei div è 100 px, il wrapper potrebbe essere 150 px. Poi contenitore deve essere 1000px (non al 100%!)

Answer 6

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

Answer 7

Questo problema si verifica quando si dispone di un div container per il vostro wrapper La correzione di questo è quello di impostare l'altezza della container-99%.

seguito è il CSS, che finalmente ha risolto questo problema per 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; 
} 

Speranza che aiuta!