首先下载下载iScroll.js
百度搜索iScroll.js,或者从这里下载http://pan.baidu.com/s/1bntS73x
第一:引入 iscroll.js,这个不用多说把
第二:主要代码:
编写规范的html格式
只有如下格式才能实现滑动效果
<div id="wrapper">
<div class="scroll">
这个区域可以滑动
</div>
</div>
如下格式不能滑动
<div id="wrapper">
<div class="other">这个区域可以滑动</div>
<div class="scroll">
这个区域不可以滑动了
</div>
</div>
只有wrapper的第一个子元素才能实现滑动效果。
第三:JS主要代码:
编写js调用代码
var Scroll = new iScroll('wrapper',{hScrollbar:false, vScrollbar:false});
此处 测试是上下滑动的代码
第一参数必需是滑动元素的父元素的id。
主要参数一览:
hScroll: true, 左右滑动,默认为true
vScroll: true,上下滑动
hScrollbar: true, 是否显示y轴滚动条,默认为显示
vScrollbar: true,是否显示X轴滚动条,默认为显示
这个代码 我测试过 ,主要问题在,往上滑动后,无法显示下拉部分,只要在滑动的代码 处加上显示高度,一般为 整体的一半即可,
<div id="wrapper">
<div class="other">这个区域可以滑动</div>
<div class="scroll">
这个区域不可以滑动了
</div>
</div>
比如这里 滑动的部分 是other,那么这里的CSS就加上 高度css 即可。