peachananr / onepage-scroll

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin
http://peachananr.github.io/onepage-scroll/Demo/demo.html
9.54k stars 2.06k forks source link

debugging over mobil device #144

Open Radames307 opened 10 years ago

Radames307 commented 10 years ago

Hi, your lib is amazing, thank you for share it with us...

In a mobil environment, with responsiveFallback set on false, i had issues while trying swipe up and down, maybe the reazon was the bind event was called several times while was swiping the screen, so i added a "event.preventDefault()" inside two functions: functions touchstart(event){... event.preventDefault()} functions touchmove(event){... event.preventDefault()}

So that's it, maybe you already know that, i just want you to take it in mind,

Thank you again.

mellinger commented 10 years ago

This fix seems to make the scroller work with transitions on iPad, in case anyone else is having that issue, it's unresolved as of 6/22.

In order to get it to work, I added an unbind right before the bind in the touchstart event, and put the event.preventDefault() inside the first IF statement within the touchmove function.

    function touchstart(event) {
      var touches = event.originalEvent.touches;
      if (touches && touches.length) {
        startX = touches[0].pageX;
        startY = touches[0].pageY;
        $this.unbind('touchmove', touchmove);
        $this.bind('touchmove', touchmove);
      }
    }

    function touchmove(event) {
      var touches = event.originalEvent.touches;
      if (touches && touches.length) {
        var deltaX = startX - touches[0].pageX;
        var deltaY = startY - touches[0].pageY;
        event.preventDefault();
        if (deltaX >= 50) {
          $this.trigger("swipeLeft");
        }
        if (deltaX <= -50) {
          $this.trigger("swipeRight");
        }
        if (deltaY >= 50) {
          $this.trigger("swipeUp");
        }
        if (deltaY <= -50) {
          $this.trigger("swipeDown");
        }
        if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
          $this.unbind('touchmove', touchmove);
        }
      }
    }