Question

我正在使用iScroll 5为this page创建一个水平滚动，但如果没有它不断地回到它的初始位置，我就无法使水平滚动工作。

当我设法让水平滚动工作时（即幻灯片在适当的行而不是整个页面上），那么滚动变得不可能 - 拖动和释放只会将滑块捕捉回到它的位置开始了。

初始化：

<script type="text/javascript">
    var myScroll;
    var myScrollTwo;
    function loaded() {
        myScroll = new IScroll('.barkivesslider', { scrollX: true, scrollY: false, momentum: false, snap: true, mouseWheel: true });
        myScrollTwo = new IScroll('.quickiesslider', { scrollX: true, scrollY: false, momentum: false, snap: true, mouseWheel: true });
    }
</script>

HTML：

<section class="quickiesslider">
    <ul class="wrapper slider">
        <li class="slide">
            <a href="#"><img src="img/thumbs/quickies/1982.png" /></a>
            <span>1982</span>
        </li>
        <li class="slide">
            <a href="#"><img src="img/thumbs/quickies/1985a.png" /></a>
            <span>1985</span>
        </li>

        (etc)

    </ul>
</section>

相关CSS：

.slider {
    width: 100%;
    height: 240px !important;
    list-style:none;
}

.slide {
    display:block;
    width: auto;
    height: 100%;
    float: left;
    padding-right: 20px;
}

.slide span {
    float: left;
    margin-top: 5px;
    display: block;
    position: absolute;
}

鉴于我过去几晚的睡眠时间很短，我猜我有一些明显的修复方法。有任何想法吗？谢谢！

Answer 1

最终想出了如何做到这一点，这是一个简单的解决方法。

将.slider从“width：100％”更改为足以容纳幻灯片的固定值，然后使用“snap：false”而不是true来初始化它！

iScroll的水平滚动问题 - 这是一个CSS问题吗？

1 个答案: