从容器中分离滚动

Question

看到这个fiddle:

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

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

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

我现在有

.container {
overflow:hidden;
}

.viewer {
overflow-y: auto;
}

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

我该怎么做？

Answer 1

在 JS 的最后一行使用这个：view.scrollTop = 0;

看到这个：https://jsfiddle.net/3farotce/

对于动画 scrollTop 使用 jQuery 库 3.4，

并添加：

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

看到这个新的fiddle：https://jsfiddle.net/7fhowp3L/

Answer 2

我已经创建了，请查看：

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

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