iScroll Nicht scrollen Inhalte, springt zurück nach oben

Ich habe ein paar Foren zu diesem Thema, aber keiner hat mein problem gelöst. Ich bin mir sicher, dass Ihr etwas kleines fehlt mir

Hier ist iscroll Initialisierung:

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

Hier ist mein 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;

}

Hier ist mein 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 -->

InformationsquelleAutor Mike6679 | 2012-06-13

iscroll

10

Problem war, Sie haben keinen übergeordneten div class display auf 'none' eingestellt, wenn die Seite zuerst geladen wird. So habe ich mich auf 'pi_panel großen' auf display: 'block';
- Plus 1 von mir. Hinzufügen, um Ihre Antwort, iscroll container-element muss sichtbar sein, bevor iscroll wird initialisiert. Ich habe gerade kämpften mit iscroll auf einem ipad webapp, wo alle Ansichten angezeigt werden, dynamisch.
- ** Siehe auch die Antwort hier für Probleme mit iscroll 5: stackoverflow.com/questions/25962095/...
InformationsquelleAutor Mike6679
5

Stellen Sie sicher, dass die Höhe des Containers überschreitet die wrapper-Höhe also nicht machen height:100%. Zum Beispiel, wenn der wrapper enthält ein container, und es gibt 10 divs im container:

Wenn Jeder der divs ist 100px dem wrapper könnte 150px. Dann Container werden 1000px (nicht 100% !)

InformationsquelleAutor Vasdor

geben eine Höhe, um Ihre wrapper, es ist nur für mich gearbeitet.

.wrapper1 {
    position:absolute; z-index:1;
    top:250px; bottom:0px; left:3%;
    margin-left:25px;
    width:100%;
    background:none;
    overflow:auto;
    height:100px;
}

InformationsquelleAutor AnhSirk Dasarp

1

Zu bekommen, um die "div-display-none" - Problem, gehen Sie nach dem laden der Daten in Ihrem Netz, div, etc:
```
            myScroll.refresh();
            myScroll.scrollTo(0, 0, 1000);
```
Wo myScroll geladen wurde:

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

InformationsquelleAutor Paul D

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

InformationsquelleAutor Brynner Ferreira

-1

Dieses problem tritt auf, wenn Sie eine container div für Ihre wrapper Die Lösung für dieses Problem ist die Höhe der container zu 99%.

Folgenden ist der CSS, die endlich das Problem gelöst für mich:

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

Hoffe, das hilft!

Irgendeinem Grund für den down-vote bitte?

InformationsquelleAutor Mahendra Liya

-2

Andere Lösung, die funktioniert für mich ist die Verpackung iScroll init-Funktion mit setTimeout. Dies wird einige Zeit für den browser zum Rendern des Elements vor der iScroll angewendet wird.
- dies ist eine schreckliche Idee. Tun Sie es auf DOM-ready-oder wenn Sie den scroller (wenn Sie die änderung der Sichtbarkeit dynamisch)
InformationsquelleAutor Marcin Baniowski

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.