Possible to prevent browser window from moving / scrolling vertically at all times?

Question

I have a site currently in build which i want to prevent any vertical movement on.

Current build consists of an HTML index page (and linked CSS documents) which contains:

a menu utilising jquery accordion (expands and contracts on press) in a div.

a container in a div directly after this, which is pushed down by the menu div.

As soon as the height of these exceeds the height of the screen/s i am testing on, users can move the page vertically up and down via touch. i want to prevent this completely.

Essentially the content could be any height - 1000px, 10000px, any height at all - and you would not be able to scroll vertically at all, the content would be fixed in position no matter what the height.

I would like to do this with CSS, but am aware that i may have to involve jquery.

I do hope this makes sense. i cannot post an example at this point in time due to the extremely sensitive nature of the project so i have created a visual in an attempt to explain what i'm trying to achieve below.

Answer 1

For no scrolling at all, try

body {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
}

For no scrolling vertically, but horizontal OK, try

body {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow-x: hidden;
   overflow-y: scroll;
}