How to stop pull-to-refresh in p5.js Web Editor

p5.js
1

Hi,

I’ve created a webpage that involves some dragging and dropping features and I would like to disable the “pull-to-refresh” feature of the browser.

I read that by adding the line “overscroll-behavior-y: contain;” to the css file it will disable the pull to refresh feature while still allowing for normal swiping behavior. (https://drafts.csswg.org/css-overscroll/#propdef-overscroll-behavior)

When I added this to the style.css file in my Sketch files in the Web Editor, the text turns red and it doesn’t seem to work.

Can anyone provide some insight or point me in the right direction?

2

Welcome to the forum Rise. Any chance you can share the sketch that you made in Web Editor with us? If it’s too big or it contains personal information, I suggest making an MCVE and share that instead.

1 Like
3

https://editor.p5js.org/ChristianPretorius/full/iQwJOtCQw

4

Have you tested this sketch on your mobile and does it refresh when you swipe down? I’ve tried it with several devices and different browsers, but none of them refresh the web page or canvas when I swipe down- or upwards.

Seeing I can’t experience the problem it’s harder for me to help you, but perhaps some pointers might help you get closer to a solution:

  1. I notice your sketch lacks semicolons. Don’t forget to add one of these bad boys after each line of code.
  2. Have you checked the browser-compatibility for overscroll-behaviour-y? Perhaps you’re testing with a browser that’s not compatible with it.
  3. Have you tried adding ‘overscroll-behavior-y: contain;’ to canvas instead of html, body?
5

Thanks for testing and the reply.

  1. will do.
  2. I didn’t, but I’m running Chrome v76 on Android 9 (I don’t think this is the problem).
  3. I did, still refreshing.

I don’t understand how it’s not refreshing on your devices/browsers. I’ve tried it on my mobile in both Brave & Chrome browsers - refreshes both times… I’ve tried to attach 2 screenshots.

strange…

1d70e88c-8ad7-401d-a876-5b8e45de5f05
1d70e88c-8ad7-401d-a876-5b8e45de5f05.jpg622×1280 27.7 KB

6

Let’s wait for some other peeps to test on their mobile devices as well :slight_smile:

1 Like
7

Had a friend try it too with no luck. Still refreshing. I’ll keep testing and update. Thanks for your feedback and helping out. Much appreciated!

8

Managed to get my hands on a tablet with Chrome, and had the same refresh issue. Do you know if the problem only happens in Chrome with mobile/tablet devices? (I have a laptop with touch screen and it’s not refreshing there)

Secondly, have you considered using touch-action: none for your sketch?