Question

我正在使用iscroll5卷轴，现在已经停留了一段时间。

我正在尝试创建多个使用class而不是id的滚动条。我设法做到这一点，并从示例创建滚动条，但由于某种原因，我只能在垂直，但不是水平。想知道是否有人可以帮助我将垂直卷轴变成水平卷轴。

<div id="54" class="myclass">
    <div class="scroller">

            <div class="slide" style="background-color:green;">

            </div>
            <div class="slide" style="background-color:blue;">

            </div>

        </div>
    </div>
      <br />
      <br />
<div id="wrappertwo" class="myclass">
    <div class="scroller">


               <div class="slide" style="background-color:red;"></div>
          <div class="slide" style="background-color:green;"></div>
          <div class="slide" style="background-color:blue;"></div>
          <div class="slide" style="background-color:yellow;"></div>


        </div>
    </div>

滚动的水平，但无法成功将其传输到垂直滚动，它只是停止滚动。 http://plnkr.co/edit/hbdg020g7m5q5LuUNTll?p=preview

我可以设置为横向格式，但它们不会水平滚动，只是在javascript中垂直滚动，我设置了scrollX：true，例 http://jsfiddle.net/GuCC2/27/

Answer 1

我是这样做的：

var iScroll = function () {
    $('[data-iscroll]').each(function () {
        $(this).wrapInner("<div class='scroller'></div>")
            .wrapInner("<div class='wrapper'></div>");

        var wrapper = $(this).find('.wrapper'),
            windowHeight = $(window).height();

        wrapper.height(windowHeight);

        function iScrollStart() {
            var scroller = new IScroll(wrapper.get(0), {
                eventPassthrough: false,
                scrollX: true,
                scrollY: true,
                preventDefault: false,
                scrollbars: true,
                mouseWheel: true
            });
        }

        window.myScroll = iScrollStart();
    });

    document.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, false);
}();

.slide, .scroller {
    width: 1000px;
}
.slide {
    background: #222;
    color: white;
    font: 50px Arial, sans-serif;
    padding: 50px;
}
.wrapper {
    position: absolute;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
}
.scroller {
    position: relative;
}

<script src="https://rawgithub.com/cubiq/iscroll/master/build/iscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide" data-iscroll>Vertical slider</div>

http://jsfiddle.net/frank_o/zqo506c5/

Iscroll5如何将此卷轴从垂直转为水平？

1 个答案: