Prevent Scrolling in HTML5

css, html, scroll, viewport

Solution

You don't need JavaScript, just use CSS. Set `overflow: hidden;`:

body {
    overflow: hidden;
}

Problem

I would like to prevent all forms of page scrolling in my `HTML5` application. I have tried searching on SO and Google for a general answer for Prevent all scrolling mechanisms, but everything is very specific - like how to disable scrolling with touches, or with arrow keys, or the scrollbars themselves. The reason I am looking for this is to be able to create a new `div` below the visible screen, and animate it up (and down. This MoonBase shows what I mean.), and I don't want the user to be able to scroll down to see it. Is this possible? Is there a `meta` tag I can set? Or `CSS`? - Or, am I taking the wrong approach to my animation? That is, would all my problems be fixed if I simply animated in from the side instead (and included the `meta` tag `width=device-width`)? Is that the closest way for me to get the desired behavior?

Original source

Related problems