mobile safari - prevent body scroll (without using position fixed)

Question

The following works on most browsers:

body {
    overflow: hidden;
}

For mobile safari, the only working solution i found was to add:

body {
    overflow: hidden;
    position: fixed;
}

However that causes the page to scroll to top, and therefore the part of the page which i'm trying to lock isn't seen properly.

Any type of solution would be helpful (css / html / JS, in that order).

Thanks

Answer 1

So, you want to stop body scrolling, but scrolling to top hides what you want visible? That seems to contradict itself - do you mean you want to prevent manual scrolling, or just limit it in some way?

There's a number of things you could try, though all eventually have side effects depending on the stuff you're doing.

You could set the body width and height to 100vw / 100vh respectively. This might not work depending on content and if you require zooming it can get a bit ugly.

You can also add some kind of scroll to top on the touchstart and touchmove events on the body/html - but if what you're saying about scroll to top, this hides what you're trying to see... you might need to give an example or screenshot/pastebin for clarity.