How to prevent refresh on overscroll on IOS
Hi, I have this small problem - refresh on scroll. So i have box inside my application with drag and drop feature. It works everywhere besides phones. On phones when I am starting dragging there is page reload. I read about something like this - https://stackoverflow.com/questions/29008194/disabling-androids-chrome-pull-down-to-refresh-feature
But is seems it doesn't work. Any ideas ?
Stack Overflow
Disabling android's chrome pull-down-to-refresh feature
I've created a small HTML5 web application for my company.
This application displays a list of items and everything works fine.
The application is mainly used on android phones and Chrome as brow...
11 Replies
can you show us the code for drag and drop (the event listeners).
Thinking of it, I don't know if mobile supports drag-events. Think you need seperate touchmove and touchend events for that
ohw, here a nice video of Web Dev Simplified on touch events. He also mentions the page refresh.
https://www.youtube.com/watch?v=TaPdgj8mucI
Web Dev Simplified
YouTube
Learn JavaScript Touch Events In 17 Minutes
Mobile responsive design is something everyone focuses on with CSS, but touch events are something almost no one takes the time to implement. In this video I will show you how to get started with touch events, how to connect your phone to your computer for debugging, and overall how to make working with touch events easy.
š Materials/Reference...
So the code looks like more or less like this https://codesandbox.io/s/quirky-jennings-lnfhby?file=%2F16-4-release-blog-post%2Fpointer-events-example.js
the thing is that when i start to drag
i am getting page referesh š
try putting in your events as the first line
event.preventDefault()
put in onto pointerMove and didn't change anything
hm, i have no knowledge about the onDown and OnMove events of react. Don't know if they only capture clickevents or also touch.
i can not test it, but will this work?
i added the event.preventDefault(). You probably can put that line in the other
onMove
, onUp
, onGotCapture
and onLostCapture
as wellThe problem behaviour looks like this
- Slide is absolute div with 85vh and bottom:0
- Behide Slide there is rest of aplication so it is this typical overlay with 85vh
- when i drag the slider stays in place but everything what is in the backgroud moves
and enforces page reload
so it seems that stop-propagation should work
but it doesn't
@markboots. do you think am I missing something?
I think
overscroll-behavior
could fix this?
an overscroll-behavior: contain
should prevent the page refresh?This what i google, but seems it didn't worked
maybe something weird is going on with this component because of position absolute, no idea to be honest
wasn't able to find good solution for this