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

Published 20 hours ago • verified publisher icon bryaneaton13

Can't scroll on mobile

Open chrisjbrown opened this issue 7 years ago • 17 comments

On a mobile device or in chrome dev tools emulating a device I cannot scroll. Scrolling up does nothing and scrolling down activates the pull to refresh.

chrisjbrown avatar Nov 07 '16 09:11 chrisjbrown

I stumbled across this library yesterday and tried to use it on our web app. This seems to be a hammerjs ( the touch control library used by this ) problem. If you use inspector to cancel the css props on .refresh-view this component generated ( user-select, user-drag, touch-action ), you will be able to scroll again, but it might become a little buggy in desktop browsers.

So to use this lib you might need to fork your own hammerjs or request hammerjs to provide an option to disable those css props.

simonxeko avatar Nov 08 '16 04:11 simonxeko

How to reslove

goshcc avatar Nov 16 '16 11:11 goshcc

@goshcc, as @simonxeko points out, this is a due to the default touch-action in hammerjs is 'none'. A fix could be to set the default to 'pan-y'. Like this: let hammer = require('hammerjs'); hammer.defaults.touchAction = 'pan-y';

This might not be the best solution, but will fix your immediate problem.

EDIT: Ignore proposed solution. Will break how the component works.

XSlemX avatar Nov 18 '16 09:11 XSlemX

@bryaneaton13 hello :) any idea if and when this issue will be fixed ? Thanks

aplanchamp avatar Dec 19 '16 11:12 aplanchamp

hi, has anyone addressed this issue?

robinsonlam avatar Feb 27 '17 01:02 robinsonlam

I also encountered the same problem, I ask you to solve it?

KevenGarnet avatar Mar 10 '17 09:03 KevenGarnet

This solution breaks the pull to fresh behaviour on mine.

idesignpixels avatar Apr 03 '17 09:04 idesignpixels

nanshou

CruxCv avatar May 16 '17 03:05 CruxCv

Has anyone come up with a solution to this?

JTorr avatar Dec 21 '17 16:12 JTorr

bump

JordanForeman avatar Feb 14 '18 02:02 JordanForeman

I forked this repo and made a hack to solve this, if this hack solution may help u . https://www.npmjs.com/package/react-pull2refresh

princewck avatar Apr 08 '18 08:04 princewck

I tried your repo @princewck, but I still have an issue, when I pull down the handler does get called, however the issue is with the scroll, so if scroll down on a screen when you try to scroll back up or pulling the screen down just to move the page the handler gets called and I cant move the screen "up".

To scroll correctly I need to "pull up" a little bit and then "pull down/scroll" (all in one touch movement).

hectorhottomali avatar Apr 18 '18 21:04 hectorhottomali

@hectorhottomali yes, I finally tried other alternatives and pulltorefreshjs this package solved my problem.

princewck avatar May 24 '18 08:05 princewck

We experience the same problem on iOS and Android web view.

michaelpeterlee avatar Oct 24 '18 21:10 michaelpeterlee

https://www.npmjs.com/package/pulltorefreshjs also does not work with Cordova web-view. Folks may like to look at how Ionic V1 solved this problem.

michaelpeterlee avatar Oct 25 '18 22:10 michaelpeterlee

Isnt pull to refresh typically thought of as a mobile thing, and it doesnt work on mobile... sofaking confused.

s10mcow avatar Jul 24 '19 14:07 s10mcow

use this https://thmsgbrt.github.io/react-simple-pull-to-refresh/ this works on mobile too.

redclouddrailan avatar Apr 23 '23 16:04 redclouddrailan