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%。例如，如果 wrapper 包含一个容器，并且容器中有 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

要解决“div display none”问题，请在将数据加载到网格、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

当您的wrapper 有一个container 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 之前渲染元素提供一些时间。