<div class="scroller-cont img-list">
<div class="cont-main">
<div>
<img src="../img/lvxing.png" />
</div>
<div>
<img src="../img/zhaijia.png" />
</div>
<div>
<img src="../img/zhaijia.png" />
</div>
<div>
<img src="../img/zhaijia.png" />
</div>
</div>
</div>
dom结构,cont-main里面的内容是滚动的列表项
document.querySelector('.img-list').addEventListener('touchmove', function (e) { e.preventDefault(); }, { passive: false });
var myScroll;
myScroll = new IScroll('.img-list', {
mouseWheel: true, // 鼠标滚轮控制
scrollbars: true, //滚动条的显示
scrollY: false,
scrollX: true
})
接下来要把最外层容器的touchmove事件禁掉
然后是实例化
scrollY和scrollX分别代表纵向和横向滚动
横向滚动时和纵向滚动一定要让里面那个容器的高度/宽度超出最外层容器高度/宽度。
横向滚动样式参考
.img-list {
overflow: hidden;
position: relative;
height: 306px;
}
.img-list div {
display: inline-block;
}
.img-list>div {
}
.cont-main{
white-space: nowrap;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。