html - 从容器中分离滚动

Question

看到这个小提琴：

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

这是我正在制作的在线杂志的简化版本。如果您单击该页面，它将导航到一个新页面（在实际杂志中，这将是一个导航器）。

我希望页面彼此分开滚动，这样当您向下滚动时，不是整个容器向下滚动，而是仅向下滚动当前页面，当您进入新页面时，它的内容将位于顶部。

我现在有

.container {
overflow:hidden;
}

.viewer {
overflow-y: auto;
}

我尝试在 .page 上使用 overflow-y: auto，但这不起作用。

我该怎么做？

标签： htmlcssscrollnavigation

Answer 1

我已经创建了它，请查看：

代码笔： https ://codepen.io/manaskandelwal1/pen/LYRJOPR

我们需要使用overflow-y: scroll;