Disable scrolling on mobile

p5.js
1

Hi,
I am working on a sketch where the user moves objects around. on mobile moving objects also causes the page to scroll around which is very annoying.
I have found posts addressing this issue but am still confused. I know i may have to use "touch-action; none " in css however i don’t know how to correctly put this in my css file and it still isn’t affecting scroll.
Any solutions would be very much appreciated !

-Cal

2

Hi There :smile:
I’m not sure if this will work

html
{
position:fixed;
}

Or

html, body {
margin: 0; 
height: 100%; 
overflow: hidden;
}

Hope It Helped :wink:

3

For the record, these two pieces seemed to do the trick for me on mobile Safari, depending on the app, and how accessibility is handled:

Css:

html,
body {
  user-select: none;
  touch-action: none;
  -webkit-user-select: none;
}

Html:

<head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, zoom-factor=1.0, maximum-scale=1.0, user-scalable=no, user-zoom=no"
    />
</head>