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
.