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类显示设置为“none”。所以我设置'pi_panel large'来显示：'block';

Answer 2

确保容器的高度超过包装器的高度，即不要使height:100%。例如，如果包装器包含容器，并且容器中有10个div：

如果每个div为100px，则包装器可能为150px。然后Container必须是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

绕过＆＃34; div显示无＆＃34;问题，在网格，div等中加载数据后执行以下操作：

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

已加载myScroll：

var myScroll = new iScroll（＆＃39; friendsWrapperDrug＆＃39;，{desktopCompatibility：true，vScroll：true，hScroll：false，hScrollbar：false，lockDirection：true}）;

Answer 5

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

Answer 6

如果您的container有wrapper div，则会出现此问题。此问题的解决方法是将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;
}

希望有所帮助！

Answer 7

另一个适用于我的解决方案是使用setTimeout包装iScroll init函数。这将为浏览器提供一些时间在应用iScroll之前呈现元素。

iScroll不滚动内容，只是反弹回顶部

7 个答案: