从容器中分离滚动

Question

看看这个小提琴：

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

这是我正在制作的一本网络杂志的简化版。如果你点击页面，它会导航到一个新的页面(在实际杂志中，这将是一个导航器(。

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

我现在有

.container {
overflow:hidden;
}
.viewer {
overflow-y: auto;
}

我试着在.页面上使用overflow-y:auto，但不起作用。

我该怎么做？

Answer 1

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

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

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

Answer 2

在JS:view.scrollTop = 0;的最后一行使用此选项

请参阅：https://jsfiddle.net/3farotce/

对于动画滚动顶部使用jQuery库3.4，

并添加以下内容：

setTimeout(function () {
$(view).animate({scrollTop: 0},500)
},200);

看看这个新小提琴：https://jsfiddle.net/7fhowp3L/