Javascript 带滚动的Div超过另一个带滚动的Div

我有两个容器（c1和c2），里面有一个长列表，一个在另一个之上，都有滚动条

当c2打开并且c2必须在容器顶部打开时，我需要能够保持c1滚动位置

当我关闭c2时，我需要回到我在c1的位置

问题是c1很长，在c2下仍然可见，我无法从c1转到c2，然后回到c1到相同的滚动位置

我构建了一个简单的示例：

HTML:

CSS:

---

是否可以只向两个容器div添加一个css属性来检查一次

overflow: auto;

CSS应该如下所示

#div-under {
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 10;
background-color: green;
overflow: auto;
}

#div-over {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 20;
background-color: red;
overflow: auto;
}

$（“#btn1”）。在（“单击”，函数（）{
美元（“#div over”）.fadeIn（）；
$（“#btn2”）.fadeIn（）；
$（“#btn1”）.fadeOut（）；
$（“#div under”）.scrollTop（0）；
});
$（“#btn2”）。在（“单击”上，函数（）{
$（“#div over”）.fadeOut（）；
$（“#btn1”）.fadeIn（）；
$（“#btn2”）.fadeOut（）；
$（“#div over”）.scrollTop（0）；
});
#容器{
宽度：100%；
身高：100%；
}
#btn1{
位置：固定；
排名：0；
左：200px；
z指数：15；
背景颜色：黄色；
}
#btn2{
显示：无；
位置：固定；
排名：0；
左：300px；
z指数：25；
背景颜色：黄色；
}
#俯冲{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
z指数：10；
背景颜色：绿色；
溢出：自动；
}
#俯冲{
显示：无；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
z指数：20；
背景色：红色；
溢出：自动；
}

放映室
躲在沙发上

俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲


俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲
俯冲

您的要求不清楚。请用适当的解释编辑您的帖子。您是否尝试过在以下位置进行“div-down”和“div-over-with-position”：fixed@divy3993嗨，哪一部分？我已经包括了一个工作的例子要明确，谢谢！这是一个多么简单的解决方案，在我做的第一次测试中，它似乎工作得很好，汽车是如何改变几乎所有事情的？在手机（iPhone）中，我失去了“流体”滚动，你知道为什么吗？要使滚动在iPhone上正常工作，你可以尝试使用
overflow-y:scroll；/*必须是滚动，而不是自动*/-webkit溢出滚动：触摸太好了！顺便说一句，你知道返回时滚动到over div顶部的方法吗（第一次打开它时，你在哪里向下滚动）？请检查修改后的代码段
$（“#btn1”）。在（“单击”，函数（）{$（“#div over”）.fadeIn（）$（“#btn2”）.fadeIn（）；$（“#btn1”）.fadeOut（）$（“#div under”）。滚动顶部（0）$（“#btn2”）。在（“单击”，函数（）{$（“#div over”）.fadeOut（）；$（“#btn1”）.fadeIn（）；$（“#btn2”）.fadeOut（）；$（“#div over”）。滚动条（0）；}）谢谢，但我也尝试过这个解决方案，但我有一个问题，就是你可以看到div上升，你会隐藏它吗…：(
#container {
    width: 100%;
    height: 100%;
}
#btn1 {
    position: fixed;
    top: 0;
    left: 200px;
    z-index: 15;
    background-color: yellow;
}

#btn2 {
    display: none;
    position: fixed;
    top: 0;
    left: 300px;
    z-index: 25;
    background-color: yellow;
}

#div-under {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 10;
    background-color: green;
}

#div-over {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 20;
    background-color: red;
}

overflow: auto;

#div-under {
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 10;
background-color: green;
overflow: auto;
}

#div-over {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 20;
background-color: red;
overflow: auto;
}