Div内部Div - 单独的卷轴

Question

我希望建立一个甘特图，其中包括日期，月份和年份以及它们下方的任务。

这是我到目前为止所做的：

所以在上图中，scroll-x正在处理所有事情，包括蓝色，红色和黄色div以及它们下方的灰色div。这是为了确保在滚动时，日期与灰色div的内容保持一致。 scroll-y仅代表灰色div，其中包含蓝色广告系列名称 div。

问题在于：

问题在于，当您移动父{的scroll-x时，scroll-y会在屏幕上移动（以便它位于父div的中间）。我想要做的是让scroll-x对所有父级内容起作用，而滚动式只能在灰色div上工作，但滚动条仍然位于父级的最右侧。 任何建议都会非常感激，并提前感谢。

的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。并且，不幸的是，当它设置为2000px的全宽时，这意味着滚动y滚动条不可见，因为它在屏幕外，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

不确定这是理想的还是你想要的。如果您希望滚动条始终连接到窗口（默认情况下是这样），您可能最好不要滚动这些单独的div，而是使用position:fixed div上的date。

请注意，此解决方案使用视口单元（http://caniuse.com/#feat=viewport-units）和calc（http://caniuse.com/#feat=calc）。此外，我的代码并不能完美地反映您的CSS，因为您提供的代码与屏幕截图不匹配。