web-pull-to-refresh icon indicating copy to clipboard operation
web-pull-to-refresh copied to clipboard

HammerJS.get() call seems to break vertical scrolling

Open brandonballinger opened this issue 9 years ago • 13 comments

If you have a content element that extends past the bottom of the screen and use WPTR, the user can no longer drag to scroll the page. I was able to isolate the problem to this call to HammerJS in init(): h.get( 'pan' ).set( { direction: Hammer.DIRECTION_VERTICAL } );

I tried commenting that line out, and everything else in WPTR seems to work just fine in my app. Happy to send you a PR to delete that line if you think there are no unintended side effects.

brandonballinger avatar Jun 13 '15 19:06 brandonballinger

I have the same problem! Thank you for pointing it out!

hejun-lyne avatar Jul 05 '15 15:07 hejun-lyne

This seems to break things on iOS Safari, were you testing a desktop browser? Seems to work there.

apeatling avatar Aug 07 '15 04:08 apeatling

This was with an iOS WKWebView (which, in theory, should have the same behavior as iOS Safari) and Chrome desktop.

IIRC, it did break horizontal scrolling, so I ended up overriding the HammerJS touchAction setting. If it's helpful, here's the initialization code I've been using for the last couple of months:

var WebPullToRefresh = require('wptr');
Hammer.defaults.touchAction = 'auto'; // re-enable browser default scrolling
WebPullToRefresh.init({
  loadingFunction: () => {
    return new Promise((resolve, reject) => {
      this.refreshSong({}, (err) => !!err ? reject() : resolve())
    });
  }
});

brandonballinger avatar Aug 07 '15 04:08 brandonballinger

(My memory may be a little hazy—I've been using wptr for the last couple of months and it's been doing it's job pretty well in our little app!)

brandonballinger avatar Aug 07 '15 04:08 brandonballinger

this fixed the problem for me - thanks

1updesign avatar Aug 13 '15 20:08 1updesign

Unfortunately, both of this solutions (commenting the line and/or adding the new init code) get native vertical touch scrolling to work (good!) but break the pull to refresh, in iOS Safari and Chrome. So far, I'm still unable to get the pull to refresh to work with native touch scrolling.

jlft avatar Oct 02 '15 17:10 jlft

Same of @jlft here

felquis avatar Dec 21 '15 14:12 felquis

In Android and iOS , same demo as in Github with more content on the page (more than layout viewport height) stops vertical scrolling of the page

shmdhussain avatar Jan 09 '16 13:01 shmdhussain

I am having the same issue, any progress @apeatling ?

taylorjames avatar Mar 23 '16 01:03 taylorjames

Same issue, scroll not working after wptr init on some devices....

YZahringer avatar May 02 '16 08:05 YZahringer

For me, this simple one liner fixed everything that was breaking the scrolling on iPhone 6 (9.3.2). Find the instantiation of the Hammer object and append another parameter to reset the touchAction (line 65 in wptr.1.1.js).

var h = new Hammer( options.contentEl, { touchAction: 'auto' });

Aetiranos avatar Jun 06 '16 20:06 Aetiranos

@Aetiranos Thank's, this solves the problem of the scroll is not working on some devices.

The scroll works on Windows Mobile 10, but not the refresh...

YZahringer avatar Jun 17 '16 15:06 YZahringer

@Aetiranos's solution fixes an issue with iOS 8.4 where the ptr container would not scroll on focus, but would scroll if you focused on the overflow of the container (super weird).

WilliamIsted avatar Dec 20 '16 11:12 WilliamIsted