javascript - iscroll 在 phonegap 中不起作用？如何在 phonegap 中使用 iscroll

Question

我在 android phonegap 中创建了应用程序。我使用 iscoll 在 div 中动态显示滚动条，因为我附加了列表并动态显示。

它显示带有附加列表的div，但不显示滚动条。

在 logcat 中出现以下错误:

03-21 16:09:02.669: WARN/webview(2166): 错过拖拽，因为我们正在等待 WebCore 的着陆响应。

我的代码是

我用过cubiq.org/iscroll-4用于显示滚动条

滚动条的js是

<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>

<script type="text/javascript">

显示滚动条的函数

var scroll1;
function loaded() {
    scroll1 = new iScroll('standard');


}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>

滚动条的CSS

<style type="text/css" media="all">

body {
    font-size:12px;
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    font-family:helvetica;
    padding:20px;
}

#standard {
    position:relative; z-index:1;
    display:block; float:left;
    width:100px; height:150px;
    background:#aaa;
    overflow:auto;
    border:1px solid #aaa;
}

#standard {
    margin-right:20px;
}

.scroller {
    position:absolute; z-index:1;

    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    padding:0;
}
</style>

我用 div(id="list") 附加了列表，用 div(id="button") 附加了按钮

<div id="standard">
    <div class="scroller">
         <div id="button"></div>
       <div id="list">

       </div>

    </div>
</div>

如何用动态div显示滚动条？请指导我。提前致谢

Answer 1

我假设你在谈论水平滚动，当属性 hScroll 默认为 true 时。如果它是垂直的，您还需要在创建 iScroll 元素时将 vScroll 设置为 true。

如果您有一个动态生成的列表，则需要使用 scroll1.refresh() 来通知生成的内容。

此外，#standard 没有必要使用 overflow:auto，因为 iScroll 将其切换为 overflow:hidden。

但如文档中所述，让 iScroll 工作的最佳方法是将结构设置为(我假设您已经拥有):

<div id='ScrollWrapper'>
<ul>
  <li>content</li>
</ul>
</div>