使用滚动

Question

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

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

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

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

我建立了一个简单的例子：

HTML：

<div id="container">
<div id="btn1">Show Over DIV</div>
<div id="btn2">Hide Over DIV</div>
<div id="div-under">
  <ul>
    <li>DIV Under</li>
    <li>DIV Under</li>
    <li>DIV Under</li>
  </ul></div>
<div id="div-over">
  <ul>
    <li>DIV Over</li>
    <li>DIV Over</li>
  </ul>
</div>
</div>

脚本：

$("#btn1").on("click", function () {

    $("#div-over").fadeIn();
    $("#btn2").fadeIn();
    $("#btn1").fadeOut();
});

$("#btn2").on("click", function () {

    $("#div-over").fadeOut();
    $("#btn1").fadeIn();
    $("#btn2").fadeOut();
});

CSS：

#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;
}

https://jsfiddle.net/jx9dryz7/

Answer 1

您可以通过向两个容器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").on("click", function () {

    $("#div-over").fadeIn();
    $("#btn2").fadeIn();
    $("#btn1").fadeOut();
  $("#div-under").scrollTop(0);
});

$("#btn2").on("click", function () {

    $("#div-over").fadeOut();
    $("#btn1").fadeIn();
    $("#btn2").fadeOut();
  $("#div-over").scrollTop(0);
});

#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;
    overflow: auto;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="container">
<div id="btn1">Show Over DIV</div>
<div id="btn2">Hide Over DIV</div>
<div id="div-under">
    <ul>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
    </ul></div>
<div id="div-over">
        <ul>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
    </ul>
</div>
</div>