Question

iScroll的结构就是这个“

    <div class="navigation">
        <div class="left_arrow">
            <img class="img_left" src="images/a_right.png">
        </div>
        <div id="navigation_scroller">
            <ul id="navigation_list">
                <li><a href="house_disposition.htm"></a></li>
                <li><a href="house_disposition.htm"></a></li>
                <li><a href="house_disposition.htm"></a></li>
                <li><a href="house_disposition.htm"></a></li>
                <li><a href="house_disposition.htm"></a></li>
                <li><a href="house_disposition.htm"></a></li>
                <li><a href="house_disposition.htm"></a></li>
            <ul>
        </div>
        <div class="right_arrow">
            <img class="img_left" src="images/a_right.png">
        </div>
    </div>

现在，要求禁用拖动iscroll，滚动#navigation_scroller的唯一方法是点击.left_arrow或.right_arrow。

iscroll中的可见<li>最多有5个。

如果<li>小于5，则只需停用所有方式滚动#navigation_scroller。

当<li>大于5时，请停用拖动 iscroll ，然后点击<li>

逐个向左/向右移动.left_arrow/right_arrow

有两个问题。

如何禁用 iscroll 上的拖动？我找不到关于这个
如何逐个滚动<li>？可以通过调用scrollToElement方法吗？

Answer 1

文档没有列出一些，但iScroll v5.1.1有额外的选项，如：

滚轮
disableMouse
disablePointer
disableTouch

你可以将它们全部设置为false / true并且不与鼠标，触摸板交互，我们的触摸屏不会被处理。

要使用箭头更改幻灯片，您可以使用以下方法：

下（）
分组（）

或更好

goToPage（x，y）

要在页面之间滑动，您应设置捕捉选项以匹配您描述为页面的元素。在您的情况下，选项可能如下所示：

var options = {
    snap: 'li', // your page selector
    snapThreshold: 0.1,
    mouseWheel: false,
    disableMouse: true,
    disablePointer: true,
    disableTouch: true
};

var scroll = new IScroll('#navigation_scroller', options);

现在只需在箭头上附加事件即可相应地调用scroller.goToPage(x, y)。 X和Y代表＆＃34; page＆＃34;号码（在您的情况下为<li>订单号）。要获取当前页面位置，您应该相应地阅读scroller.currentPage.pageY或scroller.currentPage.pageX。

这可以帮助您实现项目的预期行为。

如何在iScroll上禁用拖动事件？

1 个答案: