html - 如何只让内容滚动而其余部分保持不变

Question

我在接收滚动内容时遇到了一些麻烦。我在顶部有一个底部列表，我的滚动内容在中间，我的滚动内容正下方有一个 xAxis(需要“附加”到滚动内容)。

我的滚动内容应该滚动，如果它比页面大。如果不是，滚动条应该消失，我的 xAxis 应该在滚动内容下方(不固定在底部)。

这是我目前所拥有的:

<div id="wrapper">
<button type="button">1 HR</button>
<button type="button">2 HR</button>
<button type="button">3 HR</button>
<button type="button">4 HR</button>
<button type="button">5 HR</button>

<div id="outer">
    <div class="content">
        <myChart></gantt-chart>
    </div>
</div>
<div class="xAxisOfMyChart"></div>

和:

#wrapper {
   position: relative;
   height: auto;
}

#outer {
   margin-top: 20px;
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
}

.overflow-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 80%;
    z-index: 1;
 }

#wrapper:before,
#wrapper:after {
   z-index: 2;
   position: absolute;
   content: "";
   display: block;
}

#wrapper:after {
   bottom: 0;
}

#wrapper:before {
   top: 0;
}

基本上我的定位是: Inner div element scroll via outer scrollbar

和 fizzle

Answer 1

给你的内容一个固定的高度，然后 overflow-y:scroll; 查看 fiddle或运行片段。为了示例的目的，我将正文设置为 600 像素高，将内容设置为 450 像素高。该图的高度大于 450 像素。

#wrapper {
   position: relative;
   height: auto;
}

#outer {
   margin-top: 20px;
   overflow-y: auto;
   overflow-x: hidden;
   height: 600px;
    border:1px solid #ccc;
}

.content {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 450px;
    background-color:red;
    overflow-y:auto;
    z-index: 1;
 }



#wrapper:before,
#wrapper:after {
   z-index: 2;
   position: absolute;
   content: "";
   display: block;
}

#wrapper:after {
   bottom: 0;
}

#wrapper:before {
   top: 0;
}

<div id="wrapper">
<button type="button">1 HR</button>
<button type="button">2 HR</button>
<button type="button">3 HR</button>
<button type="button">4 HR</button>
<button type="button">5 HR</button>

<div id="outer">
    <div class="content">
        <myChart><img src="https://www.virtualboss.net/screenshots/images/ganttchart.gif"></myChart>
    </div>
</div>
<div class="xAxisOfMyChart"></div>