how to use iscroll javascript in phone gap?

Question

I have tried implementing the iscroll java script for my application as a remedial process for the CSS position:fixed that does not work in android 2 and 3 versions using cordova 2.1.0

I have copied the javascript of iscroll-lite from here

html code

<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
    <div id="header" class="header">
    <div id="header_title" class="header_title"> </div>
    <div id="abc" class="abc"><img src="img/abc.png""/>                     </div>
</div>
<div id="images" class="images"><img  name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description"  class="description">
<div id="title" class="title">
    <h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>  

<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>

The content of desc tag is going to overflow

CSS

.wrapper
{
    position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_other
{
     width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_container
{
    width:100%;  margin:0 auto; font-family:Arial, Helvetica, sans-serif; 
}
.header
{
    float:left; height:100%;  min-height:100%; margin:0%; width:96%; padding:3% 2% 0;
}
.header_title
{
     float:left; padding:0%; margin:0%;  height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%; 
}

.images
{
    position:relative; width:100%;
}
.description
{
     float:left; width:100%; overflow:auto;  height:100%; 

}
.title
{
    width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF; 
}
.desc
{
      width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px; 
}
.desc p
{
      margin-top:0; 
}
.footer
{
     width:100%;  position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
    text-indent:1%; float:left; text-align:center;  width:75%;  margin-top:2%;
}
.info
{
    width:25%; float:right; padding-top:1%;
}

USING iscroll

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


var myScroll;
document.addEventListener("deviceready", onDeviceReady, false);
function scroll() 
{
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});
}
----
----
function onDeviceReady() 
{   
    scroll();
    ----
    ----

On scrolling,I just get the following

W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.

PROBLEM:

It is is not scrolling.If at all it does after great effort on it but,it scrolls only once.I go back to the main page and return it does not scroll at all.

Please,Guide me!!

EDIT: this I have tried in various combinations..replacing all the divs as li tag...the css wasn't effective. then used li tag within each div. No use... IT did not scroll.:

<div id="wrapper">
<div id="scroller">
<ul>
  <div id="header " class="header ">
     <div id="header_title" class="header_title"> </div>
    <div id="xyz" class="xyz"><img src="img/xyz.png" onClick="xyz()"/></div>    </div>  </ul>

<ul>
      <div id="images" class="images"><img  name="slide" src="img/banner1.png" width=100%; />
   </div>
</ul>

<ul>
  <div id="param" class="param">
    <div id="abc" class="abc noSelect"> </div>
        <div id="def" class="def noSelect" > </div>
        <div id="ghi" class="ghi noSelect" > </div>
        <div id="ijk" class="ijk noSelect" > </div>
    </div>
</ul>

<ul>
  <div id="description"  class="description">
       <div id="title"  class="title">
    <h1><strong><li></li></strong></h1>
       </div>

    <div id="desc" class="desc">
    <p><li></li> </p>
    </div>
</div>

</ul>

Answer 1

You don't seem to be following the structure that iScroll asks for. The iScroll page specifically mentions (note the bold text):

The optimal iScroll structure is:

<div id="wrapper">
  <ul>
      <li></li>
      ...
      ...
  </ul>
</div>

In this example the UL element will be scrolled. The iScroll must be applied to the wrapper of the scrolling area.

Important: only the first child of the wrapper element will be scrolled. If you need more elements inside the scroller you may use the following structure:

<div id="wrapper">
  <div id="scroller">
      <ul>
          <li></li>
          ...
          ...
      </ul>

      <ul>
          <li></li>
          ...
          ...
      </ul>
  </div>
</div>

In this example the scroller element will be scrolled (together with the two ULs).

You have:

<div id="wrapper" class="wrapper">
  <div id="wrapper-container" class="wrapper-container">
  ... head ...
  </div>

  ... (your main div here) ...
</div>

So your main div won't be scrolled by iScroller, you're only making the header div scrollable. Have a look at the iScroll demo and test it out first... does it work OK for your device? If yes, try to follow its structure.

Answer 2

In script code which you have posted, I have found a mistake. I do not know whether this mistake available in your actual file also or not. But thought to share that one first.

This is your script code.

myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});

Mistake I have found

• .wrapper is the CSS rule name. You better to pass ID here. Will assume your ID is iScrollWrapper then enable the scroller in following format.

myScroll = new IScroll('iScrollWrapper', { scrollX:false , scrollY:true});

Now will see the best DOM structure (HTML format) for iScroll which will not trouble you and still W3C valid

Option 1

<div id="iScrollWrapper" class="****** IMPORTANT_POINT_1 ******">
   <ul>
      <li>
          <YOUR_REMAINING_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
   </ul>
</div>

Option 2

<div id="iScrollWrapper" class="****** IMPORTANT_POINT_1 ******">
   <ul>
      <li>
          <YOUR_ONE_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
      <li>
          <YOUR_ANOTHER_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
      <li>
          <YOUR_ANOTHER_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
   </ul>
</div>

Very first think you have to do is

****** IMPORTANT_POINT_1 ******

The element to which you attach iScroll should have non-static, non-fixed position type (Can use 'relative' or 'absolute'). That element should have height in pixel (If you have min-height or max-height but no **height** iScroll will say sorry. It will not work)

Now will see how you can attach iScroll.

Good way of attaching iScroll is as follows (This what I have learnt when I apply iScroll for elements)

If you are using Single Page Application (SPA) then

if('undefined' != typeof iScrollerObject){
  iScrollerObject.destroy(); 
}
iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */});

If you make iScrollerObject as your member variable in SPA application then use

var _this = this;
if(null != _this.iScrollerObject){
  _this.iScrollerObject.destroy(); 
}
_this.iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */});

For normal browser pages.

var iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */});

If you dynamically update the content then use checkDOMChanges : true in your options. If still it failed to update the scroller for dynamic DOM change then after you completing that dynamic DOM change call iScrollerObject.refresh();

I have shared what I learnt about iScroll in my experience. If you need any please let me know. Please remember you are using iScroll lite version which actually has less features than standard iScroll4. If you want to use iScroll version then go with iScroll4.