他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)1.无法滑动的问题
　　需要检查iscroll.js文件加载上没有，如果加载上检查一下它和jquery文件加载的先后顺序。wrapper的position必须得写，bottom也必须得写。
2.滑不上去的问题
　　wrapper的height设置成了100%。所以出现这个问题，把这个属性去掉了好了
3.页面滑动不流畅（这样是暂时行可以，还没找到更好的解决办法）　　
&　&#scroller&{& & & & transform:&translate3d(0,0,0);& & & & -webkit-transform:&translate3d(0,0,0);& & & & -moz-transform:&translate3d(0,0,0);& & &}&
4.点击input框、select等表单元素时没有响应，这个问题原因在于iscroll需要一直监听用户的touch操作，以便灵敏的做出对应效果，所以它把其余的默认事件屏蔽了，解决的方法是，在iscroll4源码里面找到这一行，
&&&& onBeforeScrollStart: function (e) { e.preventDefault(); }
然后把它改成：&&& onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget？ e.explicitOriginalTarget.nodeName.toLowerCase():(e.target？ e.target.nodeName.toLowerCase():'');if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea') e.preventDefault(); }
&&& 这样只要你touch的元素是 select || option || input || textarea时，它就不会执行e.preventDefault()，默认的事件就不会被屏蔽了。
&&& 如果你有其他不想被屏蔽的元素，可以自己修改，不过需要注意onBeforeScrollStart里的屏蔽默认事件很重要，它是iscroll进行流畅滚动的基础，不要随便的把它去掉，否则你会发现滚动起来很卡顿。
5.Iscroll异步加载DOM造成滑动不上去的问题
　　我实在ajax执行完成以后重新加载一次iscroll，myScroll.refresh();
用iscroll5实现的页面初始化加载到页面最底部，点击一个按钮最底部加载一条数据，并且实现下拉加载更多的效果，iscroll-probe.js是关键，
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"&
&title&iScroll demo: probe&/title&
&script type="text/javascript" src="../build/iscroll-probe.js"&&/script&
&script src="jquery-2.0.2.min.js"&&/script&
&script type="text/javascript"&
var pullDownEl, pullDownL;
var pullUpEl, pullUpL;
var Downcount = 0 ,Upcount = 0;
var loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
function pullDownAction() {//下拉事件
setTimeout(function() {
alert('ook')
pullDownEl.removeClass('loading');
pullDownL.html('下拉显示更多...');
pullDownEl['class'] = pullDownEl.attr('class');
pullDownEl.attr('class','').hide();
myScroll.refresh();
loadingStep = 0;
}, 1000); //1秒
function pullUpAction() {//上拉事件
setTimeout(function() {
/* var el, li,
el = $('#add');
for (i = 0; i & 3; i++) {
li = $("&li&&/li&");
Upcount++;
li.text('new Add ' + Upcount + " ！");
el.append(li);
pullUpEl.removeClass('loading');
pullUpL.html('上拉显示更多...');
pullUpEl['class'] = pullUpEl.attr('class');
pullUpEl.attr('class','').hide();
myScroll.refresh();
loadingStep = 0;
function loaded() {
pullDownEl = $('#pullDown');
pullDownL = pullDownEl.find('.pullDownLabel');
pullDownEl['class'] = pullDownEl.attr('class');
pullDownEl.attr('class','').hide();
pullUpEl = $('#pullUp');
pullUpL = pullUpEl.find('.pullUpLabel');
pullUpEl['class'] = pullUpEl.attr('class');
pullUpEl.attr('class','').hide();
myScroll = new IScroll('#content', {
probeType: 2,
scrollbars: true,//有滚动条
mouseWheel: true,//允许滑轮滚动
fadeScrollbars: true,//滚动时显示滚动条，默认影藏，并且是淡出淡入效果
bounce:true,//边界反弹
interactiveScrollbars:true,//滚动条可以拖动
shrinkScrollbars:'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
click: true ,// 允许点击事件
keyBindings:true,//允许使用按键控制
momentum:true// 允许有惯性滑动
myScroll.scrollToElement(document.querySelector('#scroller li:last-child'))
//页面初始化显示最后一条数据
myScroll.on('scroll', function(){
if(loadingStep == 0 && !pullDownEl.attr('class').match('flip|loading') && !pullUpEl.attr('class').match('flip|loading')){
if (this.y & 5) {
//下拉刷新效果
pullDownEl.attr('class',pullUpEl['class'])
pullDownEl.show();
myScroll.refresh();
pullDownEl.addClass('flip');
loadingStep = 1;
}else if (this.y & (this.maxScrollY - 5)) {
//上拉刷新效果
pullUpEl.attr('class',pullUpEl['class'])
pullUpEl.show();
myScroll.refresh();
pullUpEl.addClass('flip');
loadingStep = 1;
//滚动完毕
myScroll.on('scrollEnd',function(){
if(loadingStep == 1){
if (pullUpEl.attr('class').match('flip|loading')) {
pullUpEl.removeClass('flip').addClass('loading...');
pullUpL.html('Loading...');
loadingStep = 2;
pullUpAction();
}else if(pullDownEl.attr('class').match('flip|loading')){
pullDownEl.removeClass('flip').addClass('loading...');
pullDownL.html('Loading...');
loadingStep = 2;
pullDownAction();
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
$(function(){
$('#footer a').click(function(){
var el, li,
el = $('#add');
for (i = 0; i & 3; i++) {
li = $("&li&&/li&");
Upcount++;
li.text('new Add ' + Upcount + " ！");
el.append(li);
myScroll.refresh();
$('.delete').click(function(){
$('#add li:last-child').remove();
myScroll.refresh();
&style type="text/css"&
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-touch-action: none;
body,ul,li {
padding: 0;
margin: 0;
border: 0;
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden;
/* this is important to prevent the whole page to bounce */
position: absolute;
z-index: 2;
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
position: absolute;
z-index: 2;
bottom: 0;
width: 100%;
height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
#footer a {
width: 50%;
display: block;
float: left;
text-align: center;
line-height: 48px;
color: #fff;
font-size: 16px
#content {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
width: 100%;
background: #ccc;
overflow: hidden;
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
#scroller li {
padding: 0 10px;
height:<span style="background-color: #f5f5f5; color: #px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
#pullDown, #pullUp {
background:#fff;
height:40px;
line-height:40px;
padding:5px 10px;
border-bottom:1px solid #ccc;
font-weight:bold;
font-size:14px;
color:#888;
#pullDown .pullDownIcon, #pullUp .pullUpIcon
display:block; float:left;
width:40px; height:40px;
background:url(pull-icon@2x.png) 0 0 no-repeat;
-webkit-background-size:40px 80px; background-size:40px 80px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:<span style="background-color: #f5f5f5; color: #ms;
#pullDown .pullDownIcon {
-webkit-transform:rotate(0deg) translateZ(0);
#pullUp .pullUpIcon
-webkit-transform:rotate(-180deg) translateZ(0);
#pullDown.flip .pullDownIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
#pullUp.flip .pullUpIcon {
-webkit-transform:rotate(0deg) translateZ(0);
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
background-position:<span style="background-color: #f5f5f5; color: #%;
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-transition-duration:0ms;
-webkit-animation-name:loading;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
@-webkit-keyframes loading {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(360deg) translateZ(0); }
&body onload="loaded()"&
&div id="header"&&a href="javascript:myScroll.scrollToElement(document.querySelector('#scroller li:last-child'))"&Scroll&/a&&/div&
&div id="content"&
&div id="scroller"&
&div id="pullDown" class="ub ub-pc c-gra"&
&div class="pullDownIcon"&&/div&
&div class="pullDownLabel"&Loading...&/div&
&ul id="add"&
&li&&a href="#"&Scroll to element 10&/a&&/li&
&li&&input type="text" value="测试" id="test" disabled="disabled"&&/li&
&li&Pretty row 1&/li&
&li&Pretty row 2&/li&
&li&Pretty row 3&/li&
&li&Pretty row 4&/li&
&li&Pretty row 5&/li&
&li&Pretty row 6&/li&
&li&Pretty row 7&/li&
&li&Pretty row 8&/li&
&li&Pretty row 9&/li&
&li&Pretty row 10&/li&
&div id="pullUp" class="ub ub-pc c-gra"&
&div class="pullUpIcon"&&/div&
&div class="pullUpLabel"&上拉显示更多...&/div&
&div id="footer"&
&a href="javascript:myScroll.scrollToElement(document.querySelector('#scroller li:last-child'))"&添加&/a&
&a style="display:cursor:" class="delete"&删除&/a&
阅读(...) 评论()在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我是照着官网例子写的，手机打开就卡住一点不能滚动。安卓 ios都卡主不能动
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
Scroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。
尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。最佳的HTML结构如下：
&div id="wrapper"&
&li&...&/li&
&li&...&/li&
iScroll作用于滚动区域的外层。在上面的例子中，UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。
最基本的脚本初始化的方式如下：
&script type="text/javascript"&
var myScroll = new IScroll('#wrapper');
第一个参数可以是滚动容器元素的DOM选择器字符串，也可以是滚动容器元素的引用对象。下面是一个有效的语法：
var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
所以基本上你要么直接传递元素，要么传递一个querySelector字符串。因此可以使用css名称代替ID去选择一个滚动器容器,如下:
var myScroll = new IScroll('.wrapper');
注意，iScroll使用的是querySelector 而不是 querySelectorAll，所以iScroll只会作用到选择器选中元素的第一个。如果你需要对多个对象使用iScroll，你需要构建自己的循环机制。
当DOM准备完成后iScroll需要被初始化。最保险的方式是在window的onload事件中启动它。在DOMContentLoaded事件中或者inline initialization中做也可以，需要记住的是脚本需要知道滚动区域的高度和宽度。如果你有一些图片在滚动区域导致不能立马获取区域的高度和宽度，iScroll的滚动尺寸有可能会错误。
为滚动起容器增加position:relative或者absolute样式。这将解决大多数滚动器容器大小计算不正确的问题。综上所述，最小的iScroll配置如下：
&script type="text/javascript" src="iscroll.js"&&/script&
&script type="text/javascript"&
function loaded() {
myScroll = new IScroll('#wrapper');
&body onload="loaded()"&
&div id="wrapper"&
&li&...&/li&
&li&...&/li&
注：如果你有一个复杂的DOM结构，最好在onload事件之后适当的延迟，再去初始化iScroll。最好给浏览器100或者200毫秒的间隙再去初始化iScroll。
在iScroll初始化阶段可以通过构造函数的第二个参数配置它。
var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
上面的例子示例了在iScroll初始化时开启鼠标滚轮支持和滚动条支持。
iScroll使用基于设备和浏览器性能的各种技术来进行滚动。通常不需要你来配置引擎，iScroll会为你选择最佳的方式。
尽管如此，理解iScroll工作机制和了解如何去配置他们也是很重要的。
options.useTransform
默认情况下引擎会使用CSStransform属性。如果现在还是2007年，那么可以设置这个属性为false，这就是说：引擎将使用top/left属性来进行滚动。这个属性在滚动器感知到Flash，iframe或者视频插件内容时会有用，但是需要注意：性能会有极大的损耗。默认值：true
options.useTransition
iScroll使用CSS transition来实现动画效果（动量和弹力）。如果设置为false，那么将使用requestAnimationFrame代替。在现在浏览器中这两者之间的差异并不明显。在老的设备上transitions执行得更好。默认值：true
options.HWCompositing
这个选项尝试使用translateZ(0)来把滚动器附加到硬件层，以此来改变CSS属性。在移动设备上这将提高性能，但在有些情况下,你可能想要禁用它(特别是如果你有太多的元素和硬件性能跟不上)。默认值：true
注：如果不确定iScroll的最优配置。从性能角度出发，上面的所有选项应该设置为true。（或者更好的方式，让他们自动设置属性为true）。你可以尝试这配置他们，但是要小心内存泄漏。
滚动条不只是像名字所表达的意义一样，在内部它们是作为indicators的引用。
一个指示器侦听滚动条的位置并且现实它在全局中的位置，但是它可以做更多的事情。先从最基本的开始。
options.scrollbars
正如我们在基本功能介绍中提到的，激活滚动条只需要做一件事情，这件事情就是：
var myScroll = new IScroll('#wrapper', {
scrollbars: true
当然这个默认的行为是可以定制的。
滚动的编程接口
当然还可以通过编程来进行滚动。
scrollTo(x, y, time, easing)
对应存在的一个叫做myScroll的iScroll实例，可以通过下面的方式滚动到任意的位置：
myScroll.scrollTo(0, -100);
通过上面的方式将向下滚动100个像素。记住：0永远是左上角。需要滚动你必须传递负数。time 和 easing是可选项。他们控制滚动周期（毫秒级别）和动画的擦除效果。擦除功能是一个有效的IScroll.utils.ease对象。例如应用一个一秒的经典擦除动画你应该这么做：
myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
擦除动画的类型选项有：quadratic, circular, back, bounce, elastic。
scrollBy(x, y, time, easing)
和上面一个方法类似，但是可以传递X和Y的值从当前位置进行滚动。
myScroll.scrollBy(0, -10);
上面这个语句将在当前位置向下滚动10个像素。如果你当前所在位置为-100，那么滚动结束后位置为-110.
scrollToElement(el, time, offsetX, offsetY, easing)
这是一个很有用的方法，你会喜欢它的。在这个方法中只有一个强制的参数就是el。传递一个元素或者一个选择器，iScroll将尝试滚动到这个元素的左上角位置。time是可选项，用于设置动画周期。offsetX 和 offsetY定义像素级的偏移量，所以你可以滚动到元素并且加上特别的偏移量。但并不仅限于此。如果把这两个参数设置为true，元素将会位于屏幕的中间。easing参数和scrollTo方法里的一样。
iScroll能对齐到固定的位置和元素。
options.snap
最简单的对齐配置如下：
var myScroll = new IScroll('#wrapper', {
snap: true
这将按照页面容器的大小自动分割滚动条。snap属性也可以传递字符类型类型的值。这个值是滚动条将要对齐到的元素的选择器。比如下面：
var myScroll = new IScroll('#wrapper', {
snap: 'li'
这个示例中滚动条将会对齐到每一个LI标记的元素。下面将帮助你快速浏览iScroll提供的关于对齐的一系列有趣的方法。
goToPage(x, y, time, easing)
x 和 y呈现你想滚动到横向轴或者纵向轴的页面数。如果你需要在单个唯独上使用滚动条，只需要为你不需要的轴向传递0值。time属性是动画周期，easing属性是滚动到指定点使用的擦除功能类型。请参考高级功能中的option.bounceEasing。这两个属性都是可选项。
myScroll.goToPage(10, 0, 1000);上面这个例子将在一秒内沿着横向滚动到第10页。
滚动到当前位置的下一页或者前一页。
为了使用缩放功能，你最好使用iscroll-zoom.js脚本。和前面的示例一样，一个好的缩放功能的配置如下：
myScroll = new IScroll('#wrapper', {
zoom: true,
mouseWheel: true,
wheelAction: 'zoom'
iScroll需要知道包装器和滚动器确切的尺寸，在iScroll初始化的时候进行计算，如果元素大小发生了变化，需要告诉iScroll DOM发生了变化。下面将提供调用refresh方法的正确时机。
每次触摸DOM，浏览器渲染器重绘页面。一旦发生了重画我们可以安全地读新的DOM属性。重新绘制阶段不是瞬时发生的只是范围结束时触发。这就是为什么我们需要给渲染器刷新iScroll之前一点时间。
为了确保javascript得到更新后的属性，应该像下面的例子这样使用刷新方法：
ajax('page.php', onCompletion);
function onCompletion () {
// Update here your DOM
setTimeout(function () {
myScroll.refresh();
这里调用refresh()使用了零秒等待，如果你需要立即刷新iScroll边界就是如此使用。当然还有其他方法可以等待页面重绘，但零超时方式相当稳定。
注：*如果你有一个相当复杂的HTML结构，你应该给浏览器更多的执行事件，可以设置100到200毫秒的超时时间。这通常适用于所有任务必须在DOM上进行。通常给渲染器一些执行的时间。*
自定义事件
iScroll还提供额一些你可以挂靠的有用的自定义事件。使用on(type, fn)方法注册事件。
myScroll = new IScroll('#wrapper');
myScroll.on('scrollEnd', doSomething);
上面的代码会在每次滚动停止是执行doSomething方法。可以挂靠的事件如下：
beforeScrollStart，在用户触摸屏幕但还没有开始滚动时触发。scrollCancel，滚动初始化完成，但没有执行。scrollStart，开始滚动scroll，内容滚动时触发，只有在scroll-probe.js版本中有效，请参考onScroll event。scrollEnd，停止滚动时触发。flick，用户打开左/右。zoomStart，开始缩放。zoomEnd，缩放结束。
你可以激活keyBindings选项来支持键盘控制。默认情况下iScroll监听方向键，上下翻页建，home/end键，但这些按键绑定完全可以自定义。你可以通过传递一个包含按键代码列表的对象来进行按键绑定。默认的按键值如下:
keyBindings: {
pageUp: 33,
pageDown: 34,
right: 39,
当然你也可以传递字符串进行按键绑定（例如：pageUp: 'a'）。只要你设置了对于的按键值，那么iScroll就会响应你的设置。
滚动条信息
iScroll存储了很多有用的信息，您可以使用它们来增强您的应用。你可能会发现有用的：
myScroll.x/y，当前位置myScroll.directionX/Y，最后的方向 (-1 down/right, 0 still, 1 up/left)myScroll.currentPage，当前对齐捕获点下面是关于处理时间的代码示例：
myScroll = new IScroll('#wrapper');
myScroll.on('scrollEnd', function () {
if ( this.x & -1000 ) {
// do something
如果 x 位置是低于-1000 像素滚轮停止时，上述执行某些代码。请注意我用这个产品而不是 myScroll，您可以使用两个当然，但 iScroll 传递本身作为这种情况下，当触发自定义事件的功能。
在不需要使用iScoll的时候调用iScroll实例的公共方法destroy()可以释放一些内存。
myScroll.destroy();
myScroll =
10 收藏&&|&&80
你可能感兴趣的文章
20 收藏，5.3k
2 收藏，510
2 收藏，713
为什么我无法使用自定义事件
为什么我无法使用自定义事件
我想在滚动的div id="wrapper“外面再套一层div给这个div设置positon:relative。就不能用了。求大神求解
我想在滚动的div id=&wrapper“外面再套一层div给这个div设置positon:relative。就不能用了。求大神求解
我想在滚动的div id="wrapper“外面再套一层div给这个div设置positon:relative。就不能用了。求大神求解
我想在滚动的div id=&wrapper“外面再套一层div给这个div设置positon:relative。就不能用了。求大神求解
返回定位怎么实现
返回定位怎么实现
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
Scroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。
尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。最佳的HTML结构如下：
&div id="wrapper"&
&li&...&/li&
&li&...&/li&
iScroll作用于滚动区域的外层。在上面的例子中，UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。
最基本的脚本初始化的方式如下：
&script type="text/javascript"&
var myScroll = new IScroll('#wrapper');
第一个参数可以是滚动容器元素的DOM选择器字符串，也可以是滚动容器元素的引用对象。下面是一个有效的语法：
var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
所以基本上你要么直接传递元素，要么传递一个querySelector字符串。因此可以使用css名称代替ID去选择一个滚动器容器,如下:
var myScroll = new IScroll('.wrapper');
注意，iScroll使用的是querySelector 而不是 querySelectorAll，所以iScroll只会作用到选择器选中元素的第一个。如果你需要对多个对象使用iScroll，你需要构建自己的循环机制。
当DOM准备完成后iScroll需要被初始化。最保险的方式是在window的onload事件中启动它。在DOMContentLoaded事件中或者inline initialization中做也可以，需要记住的是脚本需要知道滚动区域的高度和宽度。如果你有一些图片在滚动区域导致不能立马获取区域的高度和宽度，iScroll的滚动尺寸有可能会错误。
为滚动起容器增加position:relative或者absolute样式。这将解决大多数滚动器容器大小计算不正确的问题。综上所述，最小的iScroll配置如下：
&script type="text/javascript" src="iscroll.js"&&/script&
&script type="text/javascript"&
function loaded() {
myScroll = new IScroll('#wrapper');
&body onload="loaded()"&
&div id="wrapper"&
&li&...&/li&
&li&...&/li&
注：如果你有一个复杂的DOM结构，最好在onload事件之后适当的延迟，再去初始化iScroll。最好给浏览器100或者200毫秒的间隙再去初始化iScroll。
在iScroll初始化阶段可以通过构造函数的第二个参数配置它。
var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
上面的例子示例了在iScroll初始化时开启鼠标滚轮支持和滚动条支持。
iScroll使用基于设备和浏览器性能的各种技术来进行滚动。通常不需要你来配置引擎，iScroll会为你选择最佳的方式。
尽管如此，理解iScroll工作机制和了解如何去配置他们也是很重要的。
options.useTransform
默认情况下引擎会使用CSStransform属性。如果现在还是2007年，那么可以设置这个属性为false，这就是说：引擎将使用top/left属性来进行滚动。这个属性在滚动器感知到Flash，iframe或者视频插件内容时会有用，但是需要注意：性能会有极大的损耗。默认值：true
options.useTransition
iScroll使用CSS transition来实现动画效果（动量和弹力）。如果设置为false，那么将使用requestAnimationFrame代替。在现在浏览器中这两者之间的差异并不明显。在老的设备上transitions执行得更好。默认值：true
options.HWCompositing
这个选项尝试使用translateZ(0)来把滚动器附加到硬件层，以此来改变CSS属性。在移动设备上这将提高性能，但在有些情况下,你可能想要禁用它(特别是如果你有太多的元素和硬件性能跟不上)。默认值：true
注：如果不确定iScroll的最优配置。从性能角度出发，上面的所有选项应该设置为true。（或者更好的方式，让他们自动设置属性为true）。你可以尝试这配置他们，但是要小心内存泄漏。
滚动条不只是像名字所表达的意义一样，在内部它们是作为indicators的引用。
一个指示器侦听滚动条的位置并且现实它在全局中的位置，但是它可以做更多的事情。先从最基本的开始。
options.scrollbars
正如我们在基本功能介绍中提到的，激活滚动条只需要做一件事情，这件事情就是：
var myScroll = new IScroll('#wrapper', {
scrollbars: true
当然这个默认的行为是可以定制的。
滚动的编程接口
当然还可以通过编程来进行滚动。
scrollTo(x, y, time, easing)
对应存在的一个叫做myScroll的iScroll实例，可以通过下面的方式滚动到任意的位置：
myScroll.scrollTo(0, -100);
通过上面的方式将向下滚动100个像素。记住：0永远是左上角。需要滚动你必须传递负数。time 和 easing是可选项。他们控制滚动周期（毫秒级别）和动画的擦除效果。擦除功能是一个有效的IScroll.utils.ease对象。例如应用一个一秒的经典擦除动画你应该这么做：
myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
擦除动画的类型选项有：quadratic, circular, back, bounce, elastic。
scrollBy(x, y, time, easing)
和上面一个方法类似，但是可以传递X和Y的值从当前位置进行滚动。
myScroll.scrollBy(0, -10);
上面这个语句将在当前位置向下滚动10个像素。如果你当前所在位置为-100，那么滚动结束后位置为-110.
scrollToElement(el, time, offsetX, offsetY, easing)
这是一个很有用的方法，你会喜欢它的。在这个方法中只有一个强制的参数就是el。传递一个元素或者一个选择器，iScroll将尝试滚动到这个元素的左上角位置。time是可选项，用于设置动画周期。offsetX 和 offsetY定义像素级的偏移量，所以你可以滚动到元素并且加上特别的偏移量。但并不仅限于此。如果把这两个参数设置为true，元素将会位于屏幕的中间。easing参数和scrollTo方法里的一样。
iScroll能对齐到固定的位置和元素。
options.snap
最简单的对齐配置如下：
var myScroll = new IScroll('#wrapper', {
snap: true
这将按照页面容器的大小自动分割滚动条。snap属性也可以传递字符类型类型的值。这个值是滚动条将要对齐到的元素的选择器。比如下面：
var myScroll = new IScroll('#wrapper', {
snap: 'li'
这个示例中滚动条将会对齐到每一个LI标记的元素。下面将帮助你快速浏览iScroll提供的关于对齐的一系列有趣的方法。
goToPage(x, y, time, easing)
x 和 y呈现你想滚动到横向轴或者纵向轴的页面数。如果你需要在单个唯独上使用滚动条，只需要为你不需要的轴向传递0值。time属性是动画周期，easing属性是滚动到指定点使用的擦除功能类型。请参考高级功能中的option.bounceEasing。这两个属性都是可选项。
myScroll.goToPage(10, 0, 1000);上面这个例子将在一秒内沿着横向滚动到第10页。
滚动到当前位置的下一页或者前一页。
为了使用缩放功能，你最好使用iscroll-zoom.js脚本。和前面的示例一样，一个好的缩放功能的配置如下：
myScroll = new IScroll('#wrapper', {
zoom: true,
mouseWheel: true,
wheelAction: 'zoom'
iScroll需要知道包装器和滚动器确切的尺寸，在iScroll初始化的时候进行计算，如果元素大小发生了变化，需要告诉iScroll DOM发生了变化。下面将提供调用refresh方法的正确时机。
每次触摸DOM，浏览器渲染器重绘页面。一旦发生了重画我们可以安全地读新的DOM属性。重新绘制阶段不是瞬时发生的只是范围结束时触发。这就是为什么我们需要给渲染器刷新iScroll之前一点时间。
为了确保javascript得到更新后的属性，应该像下面的例子这样使用刷新方法：
ajax('page.php', onCompletion);
function onCompletion () {
// Update here your DOM
setTimeout(function () {
myScroll.refresh();
这里调用refresh()使用了零秒等待，如果你需要立即刷新iScroll边界就是如此使用。当然还有其他方法可以等待页面重绘，但零超时方式相当稳定。
注：*如果你有一个相当复杂的HTML结构，你应该给浏览器更多的执行事件，可以设置100到200毫秒的超时时间。这通常适用于所有任务必须在DOM上进行。通常给渲染器一些执行的时间。*
自定义事件
iScroll还提供额一些你可以挂靠的有用的自定义事件。使用on(type, fn)方法注册事件。
myScroll = new IScroll('#wrapper');
myScroll.on('scrollEnd', doSomething);
上面的代码会在每次滚动停止是执行doSomething方法。可以挂靠的事件如下：
beforeScrollStart，在用户触摸屏幕但还没有开始滚动时触发。scrollCancel，滚动初始化完成，但没有执行。scrollStart，开始滚动scroll，内容滚动时触发，只有在scroll-probe.js版本中有效，请参考onScroll event。scrollEnd，停止滚动时触发。flick，用户打开左/右。zoomStart，开始缩放。zoomEnd，缩放结束。
你可以激活keyBindings选项来支持键盘控制。默认情况下iScroll监听方向键，上下翻页建，home/end键，但这些按键绑定完全可以自定义。你可以通过传递一个包含按键代码列表的对象来进行按键绑定。默认的按键值如下:
keyBindings: {
pageUp: 33,
pageDown: 34,
right: 39,
当然你也可以传递字符串进行按键绑定（例如：pageUp: 'a'）。只要你设置了对于的按键值，那么iScroll就会响应你的设置。
滚动条信息
iScroll存储了很多有用的信息，您可以使用它们来增强您的应用。你可能会发现有用的：
myScroll.x/y，当前位置myScroll.directionX/Y，最后的方向 (-1 down/right, 0 still, 1 up/left)myScroll.currentPage，当前对齐捕获点下面是关于处理时间的代码示例：
myScroll = new IScroll('#wrapper');
myScroll.on('scrollEnd', function () {
if ( this.x & -1000 ) {
// do something
如果 x 位置是低于-1000 像素滚轮停止时，上述执行某些代码。请注意我用这个产品而不是 myScroll，您可以使用两个当然，但 iScroll 传递本身作为这种情况下，当触发自定义事件的功能。
在不需要使用iScoll的时候调用iScroll实例的公共方法destroy()可以释放一些内存。
myScroll.destroy();
myScroll =
10 收藏&&|&&80
你可能感兴趣的文章
20 收藏，5.3k
2 收藏，510
2 收藏，713
为什么我无法使用自定义事件
为什么我无法使用自定义事件
我想在滚动的div id="wrapper“外面再套一层div给这个div设置positon:relative。就不能用了。求大神求解
我想在滚动的div id=&wrapper“外面再套一层div给这个div设置positon:relative。就不能用了。求大神求解
我想在滚动的div id="wrapper“外面再套一层div给这个div设置positon:relative。就不能用了。求大神求解
我想在滚动的div id=&wrapper“外面再套一层div给这个div设置positon:relative。就不能用了。求大神求解
返回定位怎么实现
返回定位怎么实现
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}