iscroll - iScrollコンテンツをスクロールせず、トップに戻るだけです

Question

私はこれについてたくさんのフォーラムを読みましたが、どれも私の問題を解決していません。私はそれが私が見逃している小さなものだと確信しています

iscrollの初期化は次のとおりです。

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

これが私の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;

}

これが私の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

問題は、ページが最初に読み込まれるときに、親の div クラス表示を「なし」に設定できないことでした。そこで、'pi_panel large' を display: 'block'; に設定しました。

Answer 2

コンテナの高さがラッパーの高さを超えていることを確認してくださいheight:100%。たとえば、ラッパーにコンテナーが含まれていて、コンテナーに 10 個の div がある場合:

各 div が 100px の場合、ラッパーは 150px になる可能性があります。次に、コンテナーは 1000px でなければなりません (100% ではありません!)

Answer 3

あなたのラッパーに高さを与えてください、それは私にとってはうまくいきました。

.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

「div 表示なし」の問題を回避するには、グリッド、div などにデータをロードした後、次の手順を実行します。

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

myScroll がロードされた場所:

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

containerこの問題は、 divがある場合に発生しますwrapper。これを修正するには、の高さを に設定containerし99%ます。

以下は、最終的にこの問題を修正した CSS です。

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

それが役立つことを願っています!