Div внутри Div - отдельные свитки

Question

Я ищу, чтобы построить диаграмму Ганта с днями, месяцами и годами сверху и задачами ниже них.

Вот то, что я до сих пор:

Таким образом, в изображении выше, scroll-x работает на всем, в том числе синий, красный и желтый дивы и серой DIV под ними. Это делается для того, чтобы при прокрутке, дни оставались с содержимым серого div. scroll-y действует только на сером div с синим название кампании div в нем.

Вот проблема:

Проблема заключается в том, что при перемещении scroll-x родителя, то scroll-y перемещается по экрану (таким образом, чтобы он сидел в середине родительского DIV) , Что я хочу сделать, так это то, что scroll-x работает со всем содержимым родителя, а функция scroll-y работает только на сером 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 дел. И, к сожалению, когда это установлено на полную ширину 2000px, это означает, что прокрутки у полосы прокрутки не видно, потому что это закадровый, например, так:

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>

Не уверен, что это идеальный или что ты собираешься делать. Если вы хотите, чтобы полоса прокрутки всегда была подключена к окну (как по умолчанию), вам, вероятно, лучше не прокручивать эти отдельные div и вместо этого использовать position:fixed на ваших date div.

Обратите внимание, что это решение использует оба устройства просмотра (http://caniuse.com/#feat=viewport-units) и calc (http://caniuse.com/#feat=calc). Кроме того, мой код не идеально отражает ваш CSS, потому что предоставленный вами код не соответствовал вашим снимкам экрана.