How do I programmatically scroll on iOS device while user is touching the screen

32 views Asked by At

I am trying adjust element.scrollLeft during 'scroll' event. This works fine on desktop and Android devices. While using iOS device (ipad/iphone) the scrollLeft is being ignored.

this.scrollMeasure() returns scrollLeft scrollAdjust() sets the scrollLeft to element.clientwidth

if (this.scrollMeasure() == 0) {    
    this.itemLast = this.grid.lastChild;
    this.grid.insertBefore(this.itemLast, this.grid.firstChild);
    scrollAdjust();
}

So basically when scrollLeft equals 0, the last node is moved in front of the first node. Then the scrollLeft of the element is being adjusted to emulate the visual position before the new 'first node' was appended. On iOS scrollAdjust(); is being ignored, which results in scrollLeft always equaling zero once it gets there for the first time. This makes for a very rapid node changes and a useless user experience. And only happens on iOS devices.

If i preventDefault() the touchmove and touchstart events, and replace it with some kind of scrolling script, adjusting the scrollLeft is being allowed. So I figure this has something to do with the touch interface.

Any idea what I can do to rectify this without attempting to simulate browser scrolling by code? I'd like to use the native scrolling effect on touch gestures.

0

There are 0 answers