CODEWITHSUNDEEP
javascriptjquerycordova
nathi
nathi

Reputation: 33

iscroll not working in phonegap?how to use iscroll in phonegap

I have created application in android phonegap.I have used iscoll for displaying scrollbar dynamically in div In that I have appended list and display dynamically.

It shows the div with appended list,but scroll bar is not displayed.

In logcat I got the following error:

03-21 16:09:02.669: WARN/webview(2166): Miss a drag as we are waiting for WebCore's response for touch down.

My code is

I have used cubiq.org/iscroll-4 for displaying scrollbar

js for scrollbar is 

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

<script type="text/javascript">

function for displaying scrollbar

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


}

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

css for scrollbar

<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>

I have appended list with div(id="list") and appended button with div(id="button")

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

       </div>

    </div>
</div>

how to display scroollbar with dynamic div.?please guide me. thanks in advance

Upvotes: 3

Views: 3632

Answers (1)

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

I assume you're talking about horizontal scroll, when property hScroll is defaulted as true. If it's vertical, you need to set vScroll as true also, when creating the iScroll element.

If you're having a dynamically generated list, you need to use scroll1.refresh() to notice generated content.

Also, having overflow:auto for #standard is unnecessary since iScroll switches it to overflow:hidden.

But like stated in the documentation, best way to get iScroll to work, is to have structure as (which I assume you already have):

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

Upvotes: 3

Related Questions