Iscroll not working in phonegap? How to use iscroll in phonegap
I have created an app in android phonegap. I used iscoll to dynamically display a scrollbar in a div. In that I added a list and it is dynamically displayed.
It shows the div with the list added, but the scrollbar is not displayed.
I got the following error in logcat:
03-21 16:09:02.669: WARN/webview(2166): Miss a drag as we are waiting for WebCore response for touch down
...
My code
I used cubiq.org/iscroll-4 to display the scrollbar
js for the scrollbar
<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript">
to display the scroll bar
var scroll1;
function loaded() {
scroll1 = new iScroll('standard');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
css for the 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 added list with div(id="list")
and added button withdiv(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. thank you in advance
source to share
I assume you are talking about horizontal scrolling when the default hScroll property is considered true. If it is vertical, you need to set vScroll to true when creating the iScroll element.
If you have a dynamically generated list, you need to use scroll1.refresh()
the generated content for notification.
Also, no presence overflow:auto
is required for #standard as iScroll switches it to overflow:hidden
.
But as the documentation points out, the best way to get iScroll to work is to have a structure (which I assume you already have):
<div id='ScrollWrapper'>
<ul>
<li>content</li>
</ul>
</div>
source to share