iscroll 插件 基本使用和横向滚动问题

Posted 2021-09-04 弱鸡的前端程序员

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