关于javascript:iscroll-插件-基本使用和横向滚动问题

 <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;}