Div inside Div - 单独的卷轴

Question

我想制作一个甘特图，上面是日、月、年，下面是任务。

这是我目前的情况：

所以在上图中，scroll-x 正在处理所有内容，包括蓝色、红色和黄色 div 以及它们下方的灰色 div。这是为了确保当您滚动时，日期与灰色 div 的内容保持一致。 scroll-y 仅作用于灰色 div，其中包含蓝色 活动名称 div。

问题是：

问题是，当您移动 parent 的 scroll-x 时，scroll-y 会在屏幕上移动（因此它位于 [=54= 的中间） ] div)。我想要做的是让 scroll-x 处理所有 parent 的内容，而 scroll-y 只处理灰色 div 但滚动条留在 parent 的最右边。任何建议将不胜感激并提前致谢。

css:

.container {
  position: relative;
}
.parent {
  overflow-x: scroll;
  overflow-y: hidden;
  height: 100%;
  width: 100%;
  position: absolute;
}

.date {
  width: 2000px;
  height: 25px;
  float: left;
}  

.hold_content {
  overflow-y: scroll;
  overflow-x: hidden;
  height: calc(100% - 50px)
}

.content {
  height: 2000px;
  width: 2000px;
  float:left;
}

html

<div class="container">
  <div class="parent">
    <div class="date"></div>
    <div class="date"></div>
    <div class="date"></div>
    <div class="hold_content">
      <div class="content"></div>
    </div>
  </div>
</div>

Answer 1

因此，滚动条是相对于滚动的内容而言的，这里是 hold-content div。而且，不幸的是，当它设置为 2000 像素的全宽时，这意味着 scroll-y 滚动条不可见，因为它在屏幕外，如下所示：

html {
  box-sizing: border-box;
  font-family: sans-serif;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body,
.container,
.parent {
  height: 100vh;
}
html,
body,
div {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
}
.parent {
  overflow-y: hidden;
}
.date {
  height: 25px;
  width: 2000px;
}
.date:nth-of-type(1) {
  background: blue;
}
.date:nth-of-type(2) {
  background: red;
}
.date:nth-of-type(3) {
  background: yellow;
}
.hold_content {
  background: silver;
  height: calc(100vh - 75px);
  overflow: scroll;
  width: 2000px;
}
.content {
  height: 2000px;
  text-align: center;
  width: 2000px;
}

<div class="container">
  <div class="parent">
    <div class="date">Year</div>
    <div class="date">Month</div>
    <div class="date">Date</div>
    <div class="hold_content">
      <div class="content">
        <button>Campaign Name</button>
      </div>
    </div>
  </div>
</div>

不确定这是否理想或您想要什么。如果您希望滚动条始终连接到 window（默认情况下是这样），您最好不要在 dividual div 中滚动它们，而是使用 position:fixed 在你的 date div 上。

请注意，此解决方案使用两种视口单位 (http://caniuse.com/#feat=viewport-units) and calc (http://caniuse.com/#feat=calc)。另外，我的代码不能完全反映您的 CSS，因为您提供的代码与您的屏幕截图不匹配。

Div inside Div - 单独的卷轴

Div inside Div - separate scrolls

html

css

scroll

overflow

parent-child