html - Seperate scrolling from container

Question

See this fiddle:

https://jsfiddle.net/fhu2vs39/3/

This is a simplified version of an online magazine I'm making. If you click on the page, it navigates to a new one (in the actual magazine this would be a navigator).

I would like the pages to scroll separately from each other, so that when you scroll down, not the whole container scrolls down but only the current page and when you enter a new page, it's content will be at the top.

I now have

.container {
overflow:hidden;
}

.viewer {
overflow-y: auto;
}

I tried using overflow-y: auto on the .page, but that doesn't work.

How would I do this?

Answer 1

I have created it, check it out:

Codepen: https://codepen.io/manaskhandelwal1/pen/LYRJOPR

We needed to use overflow-y: scroll;