how to use iscroll javascript in phone gap?

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

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