阅读:73728 次 编辑日期:2013-11-05
//overflow:hidden;//只有第一个DOM结构(ul)被实例化,这个DOM可以纵向或者横向的滚动, //多出的内容会被wrapper的样式hidden。
- 1
- 2
- 3
看到了吧,只有first会被实例化。 注意:这里第一个DOM结构的ID(first)可以不写,我只是为了方便大家识别才写了个ID,但是最外层的ID(wrapper)一定要写,因为在JS实例化的时候需要填写这个ID://overflow:hidden;//只有第一个DOM结构(ul)被实例化,这个DOM可以纵向或者横向的滚动, //多出的内容会被wrapper的样式hidden
- 1
- 2
- 3
- 4
- 5
- 6
var myScroll = new iScroll("wrapper");
HTML://HTML结构 <html > <body> ...code... </body> //插入iscroll.js文件 <script type="text/javascript" src="js/iscroll.js" > </script > //插入本页面JS文件 <script type="text/javascript" src="js/uw3c.js" > </script > </html> JS://JS文件内容 var myscroll; function iscroll(data){ //实例化iScroll myscroll=new iScroll("wrapper"); pageData(data); } function pageData(obj){ $("body").html(obj); myscroll.refresh();//当DOM结构发生变化的时候,需要刷新iScroll } iscroll("pagedata");
var myscroll=new iScroll("wrapper",{hScrollbar:false});或者
var opts = { vScroll:false,//禁止垂直滚动 snap:true,//执行传送带效果 hScrollbar:false//隐藏水平方向上的滚动条 }; var myscroll = new iScroll("wrapper",opts);
hScroll false 禁止横向滚动 true横向滚动 默认为true vScroll false 禁止垂直滚动 true垂直滚动 默认为true hScrollbar false隐藏水平方向上的滚动条 vScrollbar false 隐藏垂直方向上的滚动条 fadeScrollbar false 指定在无渐隐效果时隐藏滚动条 hideScrollbar 在没有用户交互时隐藏滚动条 默认为true bounce 启用或禁用边界的反弹,默认为true momentum 启用或禁用惯性,默认为true, 此参数在你想要保存资源的时候非常有用 lockDirection false取消拖动方向的锁定, true拖动只能在一个方向上(up/down 或者left/right)
//在200毫秒的时间内,Y轴向上滚动100像素; uw3c.scrollTo(0, -100, 200) //在200毫秒的时间内,相对于当前位置,X轴向左滚动100像素; uw3c.scrollTo(-100, 0, 200, true)
uw3c.refresh();//刷新iScroll
onPosChange:function(x,y){ if(y < -200){ //如果Y周向上滚动200像素,$("#uw3c")就显示,否则就隐藏。 $("#uw3c").show(); }else{ $("#uw3c").hide(); } }
//滚动结束后,执行的方法,滚动后会出现提示框alert("uw3c.com") onScrollEnd:function(){ alert("uw3c.com"); }