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?

score 24 · Accepted Answer · edited Apr 09 '13 at 17:01

24

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

body {
    overflow: hidden;
}

edited Apr 09 '13 at 17:01

Phil

34,061
21
117
154

answered Apr 09 '13 at 16:30

dersvenhesse

5,805
1
24
45

Yeah, just found this out with a little more searching. I will mark answered when I can. – Phil Apr 09 '13 at 16:31
9

It's still possible to scroll using keys when you do this. Try it: http://jsfiddle.net/ETBq2/ – Roman Starkov Oct 04 '13 at 20:34
@romkyns is there any way to stop that? – Tim Nov 18 '14 at 17:34
@Tim yes, via JS: http://stackoverflow.com/questions/8916620/disable-arrow-key-scrolling-in-users-browser – dersvenhesse Nov 18 '14 at 18:14
@dersvenhesse that would work, except the problem is using the middle click scroll, not arrow keys - see this meta post: http://meta.stackexchange.com/questions/243748 – Tim Nov 18 '14 at 18:30
How do I do that without cutting the content? – Daniel Springer Jan 28 '16 at 01:46
But what if you need `overflow: auto`? It's useful for getting divs to expand to the height of floats. – Jimbali Mar 30 '16 at 11:45

Prevent Scrolling in HTML5

1 Answers1