Prevent Scrolling in HTML5

Question

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?

Solution

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

body {
    overflow: hidden;
}