iScrol.js用法参考
8197 ワード
本文の原文のリンク:http://www.cnblogs.com/duanhuajian/archive/2013/04/08/3008323.html
iScroll 4 iScroll 。 webkit （ iPhone，iPad，Android ）
。 ， web position:absolute 、
。
，Android （ ），Apple one-finger div 。
iScroll ，iScroll 4 ：
（1） （Pinch/Zoom）
（2） （Pull up/down to refresh）
（3）
（4）
（5）
：iScroll 4 iScroll 3 ，API 。 ， API 。
iScroll 。 demo ， ， iScroll 。
iScroll ， iScroll （ ）。 iScroll
。
iScroll ，DOM ， ， 。
iScroll ：
<div id="wrapper">
<ul>
<li></li>
.....
</ul>
</div>
，ul 。iScroll wrapper 。
【 】：
wrapper ， ， ：
<div id="wrapper">
<div id="scroller">
<ul>
<li></li>
...
</ul>
<ul>
<li></li>
...
</ul>
</div>
</div>
，scroller ， ul
iScroll ， iScroll ：
（1） onDOMContentLoaded
、 ，
<script src="iscroll.js"></script>
<script>
var myscroll;
function loaded(){
myscroll=new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>
：myscroll ，
（2） onLoad
DOMContentLoaded DOM ， ， onLoad 。
<script src="iscroll.js"><script>
<script>
var myscroll;
function loaded(){
setTimeout(function(){
myscroll=new iScroll("wrapper");
}，100 );
}
window.addEventListener("load",loaded,false);
</script>
iScroll （ ） 100ms ， iScroll 。
（3）inline
js ， ， javascript ， ？
<script src="iscroll.js"></script>
<div id="wrapper">
<ul>
<li></li>
...
</ul>
</div>
<script>
var myscroll=new iScroll("wrapper");
</script>
ready iScroll（ jquery ready()）。
iScroll
iScroll ， ：
<script>
var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
</script>
， 。 ：
hScroll false true true
vScroll false true true
hScrollbar false
vScrollbar false
fixedScrollbar iOS ， scroller ， ， true
scroller 。 Android true， iOS false
fadeScrollbar false
hideScrollbar true
bounce ， true
momentum ， true，
lockDirection false ， true （up/down left/right）
'Pull to refresh' demo
Twitter Apple ， 。 。
， "pull to refresh" iScroll 。 pull to refresh 。 pullDownAction() 。 ajax ， DOM refresh 。 1 。 ， ， setTimeout 。
(pinch / zoom) 'Pull to refresh' demo
， 。 iScroll 4
。 ， zoom true 。 。
iScroll 4 。 ， ：
var myScroll =new iScroll("wrapper",{zoom:true});
：
zoomMax ， 4
【 】： 。 ， img -webkit-transform:translate3d(0,0,0) ， ， ， ， 。
（snap and snap to element） 'Carousel' demo
SNAP 。 。
，
var myscroll=new iScroll("wrapper",{
snap:true,
momentum:false,
hScrollbar:false,
vScrollbar: false
});
snap 。 li 。
var myscroll=new iScroll("wrapper",{
snap:"li",
momentum:false,
hScrollbar:false,
vScrollbar:false
});
scroller li
（custom scrollbars）
iScroll 4 ， css 。 class ， ：
var myscroll=new iScroll("wrapper",{
scrollbarClass: "myScrollbar"
});
， ： 。 wrapper ， 。
HTML ：
<div class="myScrollbarV">
<div></div>
</div>
.myscrollbarV{
position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;
}
.myScrollbarV > div {
position:absolute;
z-index:100;
width:100%;
/* The following is probably what you want to customize */
background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
border:1px solid #800;
-webkit-background-clip:padding-box;
-webkit-box-sizing:border-box;
-webkit-border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}
：
（1）refresh DOM ，
eg: setTimeout(function () { myScroll.refresh(); }, 0);
（2）iScroll scrollTo, scrollToElement scrollToPage javascript 。
scrollTo(x, y, time, relative)： time x/y 。 myScroll.scrollTo(0, -100, 200) 200 Y 100 。 myScroll.scrollTo(0, 10, 200, true) 200 Y 10 。
scrollToElement(element, time)： 。 myScroll.scrollToElement('li:nth-child(10)', 100) 100 10 li 。 1 CSS3 。
snapToPage(pageX, pageY, time)： 200 1 2 （0 1 ，1 2 ）。 SNAP 。
（3）detroy() myscroll
eg: myscroll.destroy();
myScroll = null;
iScroll
onScrol
DOM