Pure CSS solution. No need for overflow: hidden; on body, which automatically scrolls everything to the top. Make use of overflow: auto; instead.

How-To & Demo

See the demo here and source code here.

What Is Overflow: Auto?

W3C documentation is rather vague on its definition: “The behavior of the ‘auto’ value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.”

In essence, the browser displays a scrollbar where it sees fit. Usually it’s when something on the top layer overflows in one direction or two.

Browser Compatibility

Browser compatibility is pretty awesome, it agrees with everything apart from IE8, even including IOS Safari.

Explanation Update (2017/Mar/27)

http://luxiyalu.com/how-to-prevent-body-from-scrolling/