How do I disable drag event on iScroll?

Question

The structure of iScroll is this "

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

Now, the requirement is disable to drag iscroll, the only way to scroll #navigation_scroller is to click .left_arrow or .right_arrow.

And the visible <li> in iscroll at most have 5.

If <li> is less than 5, just disable all the way to scroll #navigation_scroller.

When <li> is greater than 5, disable drag iscroll, just move the <li> left/right one by one by click .left_arrow/right_arrow

---

There are two problems.

1. How to disable drag on iscroll ? I find nothing setting about this

2. How to scroll <li> one by one ? Is it possible by calling scrollToElement method ?

Answer 1

Documentation does not list some, but iScroll v5.1.1 has extra options, like:

• mouseWheel
• disableMouse
• disablePointer
• disableTouch

You can set all of them to false/true and no interaction with mouse, touchpad our touching screen wont be processed.

To change slides with arrows, you can use these methods:

• next()
• prev()

or better

• goToPage( x, y )

To slide from page to page, you should set snap option to match elements you describe as page. In your case options could look like this:

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

Now just attach events on arrows to call scroller.goToPage(x, y) accordingly. X and Y represents "page" number (in your case <li> order number). To get current page position, you should read scroller.currentPage.pageY or scroller.currentPage.pageX accordingly.

This should help you achieve your desired behaviour of your project.