Accidental page jump

[rexors]

Sometimes when I scroll though my pages he accidentally jumps to the next page instead of scrolling to it. Does anybody have a fix/workaround for this?

[thebanon]

You have to prevent scroll with this.preventScroll = true; within the mobile vertical fix if statement before return; and place it in the _onMove: and _onEnd: functions in the code posted by ptisdel

Translated to human-readable context, you prevent accidental page jumps by preventing scrolling and default actions when your y-axis is greater than your x-axis, or, in other words greater than a 45° angle, when and after you swipe.

UPDATED (20min. later): Checks direction to prevent vertical drag issues.

    _onMove: function( event ) {    
        event = event.originalEvent || event;

        // ensure swiping with one touch and not pinching
        if ( event.touches && event.touches.length > 1 || event.scale && event.scale !== 1) return;

        if (this.settings.disableScroll) event.preventDefault();

        if (this.settings.stopPropagation) {
          event.stopPropagation();
        }

        var parsedEvent = this._parseEvent(event),
            coordinates = this._checkOverscroll( parsedEvent.direction , - parsedEvent.distanceX, - parsedEvent.distanceY );

        var swipeDir = parsedEvent.direction;
        if(swipeDir == "left" || swipeDir == "right") {
            var coords = getCoords(event),
            x = this.startCoords.x - coords.x,
            y = this.startCoords.y - coords.y;
            if (Math.abs(y) > Math.abs(x)) { 
                this.preventScroll = true; return; 
            }
            console.log(swipeDir);
        }

        this.settings.onDrag.call( this, this.activeElement, parsedEvent, coordinates.overscroll, event );

        if ( !this.preventScroll ) {
          this._scroll( coordinates );
        }
    },

      _onEnd: function( event ) {

        event = event.originalEvent || event;

        if (this.settings.stopPropagation) {
          event.stopPropagation();
        }

        var parsedEvent = this._parseEvent(event);

        var swipeDir = parsedEvent.direction;
        if(swipeDir == "left" || swipeDir == "right") {
            var coords = getCoords(event),
            x = this.startCoords.x - coords.x,
            y = this.startCoords.y - coords.y;
            if (Math.abs(y) > Math.abs(x)) { 
                this.preventScroll = true; return; 
            }
            console.log(swipeDir);
        }

        this.startCoords = { x: 0, y: 0 };

        if ( Math.abs(parsedEvent.distanceX) > this.settings.minDragDistance || Math.abs(parsedEvent.distanceY) > this.settings.minDragDistance) {
          this.swipe( parsedEvent.direction );
        } else if (Math.abs(parsedEvent.distanceX) > 0 || Math.abs(parsedEvent.distanceY) > 0) {
          this._scrollToPage();
        }

        this.settings.onDragEnd.call( this, this.container, this.activeElement, this.page + 1, event );

        removeEventListener(doc.body, moveEvent, this._onMove);
        removeEventListener(doc.body, endEvent, this._onEnd);

      },

[leeyohua]

Work great. Thanks, thebanon