使用iscroll实现这样的布局可不容易。。。需要前端拥有良好的css功底然后利用js（这里lz用了zeptoJS或者大家可以用jquery）
假设我们有这么一段html
[html] view plaincopy
<div id="wrapperIndexActivity" class="wrapperIndexActivity">
<div class="scrollerActivity" id="scrollerActivity">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
首先先对ID（wrapperIndexActivity）加载iscroll
[javascript] view plaincopy
var homeScroll = new iScroll("wrapperIndexActivity", {
snap : true,
momentum : false,
hScrollbar : false,
vScrollbar : false,
checkDOMChanges : true,
onScrollEnd : function() {
}
})
对Id所属class附加样式：
[css] view plaincopy
.wrapperIndexActivity{ width:100%height:100%position:relativez-index:1overflow:hiddendisplay: block}
然后需要对ID（scrollerActivity）计算有几幅屏幕可以切换（这里假设有4幅）
[javascript] view plaincopy
$("#scrollerActivity").style({
'width' : document.body.clientWidth * 4 + 'px'
})
对应class需附加样式：
[css] view plaincopy
.wrapperIndexActivity .scrollerActivity{ height:100%float:leftpadding:0overflow:hidden}
再然后对li 让每一个列表项都撑满屏幕
[javascript] view plaincopy
$('#wrapperIndexActivity ul li ').style({
'width' : document.body.clientWidth + "px"
})
对应class附加样式：
[css] view plaincopy
.wrapperIndexActivity .scrollerActivity ul li {-webkit-box-sizing:border-box display:blockheight:100%float:left}
最后刷新iscroll
[javascript] view plaincopy
// 刷新数据
omeScroll.refresh()
有三种代码输入的方式可以在CSS隐藏滚动条。
详细方法如下：
方法一:
代码如下:
html { overflow-y: scroll}
原理：强制显示ie的垂直滚动条，而忽略水平滚动条；
优点：完全解决了这个问题, 允许你保持完整的XHTML doctype.；
缺点：即使页面不需要垂直滚动条的时候也会出现垂直滚动条；
方法二:(推荐采用)
代码如下:
html { overflow-x: hiddenoverflow-y: auto}
原理：隐藏横向滚动，垂直滚动根据内容自适应；
优点：在视觉上解决了这个问题.在不必要的时候, 未强制垂直滚动条出现；
缺点：只是隐藏了水平滚动条，如果页面真正需要水平滚动条的时候，屏幕以外的内容会因为用户无法水平滚动，而看不到；
方法三:
代码如下:
body { margin-right: -15pxmargin-bottom: -15px}
原理：这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象；
优点：在视觉上解决了这个问题，垂直滚动根据内容自适应；
缺点：由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域。
