CSS - Lock scrollbars if overflowing

Question

How do i TOTALLY prevent scrolling on my website even if there is overflow. I just don't want to hide the scrollbars because you usually can just use the mousewheel or page down anyway. I want them to be both hidden and locked.

The problem is that i have this structure(with real css and html of course)

<outerdiv height="100%">
  <innerdiv height="100%">
    <contentdiv height="ALOT">content</contentdiv>
  </innerdiv>
<outerdiv>

I only want innerdiv to scroll its children but sometimes you accidentally focus the outerdiv and when you start scrolling then the innerdiv will scroll out of view (because it's a child of the outerdiv) and you cant view the actual content anymore.

The initial layout will give both outerdiv and innerdiv the height of the browser but when looking at content to scroll the outerdiv seems to look all the way to the children of innerdiv which makes no sense as this already scrolls by itself.

Answer 1

If you use whole screen anyways, then why not just use position:absolute (with top, left, right and left set to 0) and overflow:auto with the innerdiv?

Answer 2

no scrolling: style="overflow:none;"

automatic scrolling: style="overflow:auto;"