Kevin Powell - Community•2y ago

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

MarkBoots•2y ago

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

MarkBoots•2y ago

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...

interpodOP•2y ago

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

CodeSandbox

quirky-jennings-lnfhby - CodeSandbox

quirky-jennings-lnfhby using react, react-dom

interpodOP•2y ago

the thing is that when i start to drag i am getting page referesh 😄

MarkBoots•2y ago

try putting in your events as the first line event.preventDefault()

interpodOP•2y ago

put in onto pointerMove and didn't change anything

MarkBoots•2y ago

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?

onDown = (event) => {
    event.preventDefault(); // THIS ADDED
    this.isDragging = true;
    event.target.setPointerCapture(event.pointerId);

    // We store the initial coordinates to be able to calculate the changes
    // later on.
    this.extractPositionDelta(event);
  };

onDown = (event) => {
    event.preventDefault(); // THIS ADDED
    this.isDragging = true;
    event.target.setPointerCapture(event.pointerId);

    // We store the initial coordinates to be able to calculate the changes
    // later on.
    this.extractPositionDelta(event);
  };

i added the event.preventDefault(). You probably can put that line in the other onMove, onUp, onGotCapture and onLostCapture as well

interpodOP•2y ago

interpodOP•2y ago

The 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?

Kevin Powell•2y ago

I think overscroll-behavior could fix this? an overscroll-behavior: contain should prevent the page refresh?

interpodOP•2y ago

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

Gaming

Programming

How to prevent refresh on overscroll on IOS