Div in Div - separate scrolls

Question

Ich bin auf der Suche nach einem Gantt-Diagramm mit den Tagen, Monaten und Jahren über die Spitze und die Aufgaben unter ihnen.

Hier ist, was ich bisher:

So im Bild oben, die scroll-x arbeitet an alles, einschließlich der blauen, roten und gelben divs und dem grauen div unter ihnen. Dadurch wird sichergestellt, dass die Tage beim Scrollen über den Inhalt des grauen Bereichs bleiben. scroll-y wirkt nur auf das graue div mit dem blauen Kampagnennamen div drin. Hier

ist das Problem:

Das Problem ist, dass, wenn Sie sich bewegen die scroll-x von Eltern, die scroll-y über den Bildschirm bewegt (so dass es in der Mitte der Mutter div sitzend) . Was ich suche, ist, dass die scroll-x an allen Inhalten der Eltern funktioniert und die Scroll-y nur am grauen div funktioniert, aber die Bildlaufleiste ganz rechts vom Elternteil bleibt. Jeder Rat würde wirklich geschätzt werden und danke im Voraus.

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

So ist die Scrollbar in Bezug auf was auch immer es ist Scrollen, was, hier ist die hold-content div. Und leider, wenn dieser in seiner vollen Breite von 2000px gesetzt ist, bedeutet, dass die Scroll-y Scrollbar nicht sichtbar ist, weil es außerhalb des Bildschirms ist, etwa so:

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>

nicht sicher, ob das Ideal oder was du wolltest. Wenn Sie möchten, dass die Bildlaufleiste immer mit dem Fenster verbunden ist (wie standardmäßig), sollten Sie diese einzelnen divs nicht scrollen und stattdessen position:fixed auf Ihren date divs verwenden.

Beachten Sie, dass diese Lösung beide Ansichtsfenstereinheiten (http://caniuse.com/#feat=viewport-units) und calc (http://caniuse.com/#feat=calc) verwendet. Außerdem spiegelt mein Code Ihr CSS nicht perfekt wider, da der von Ihnen bereitgestellte Code nicht mit Ihren Screenshots übereinstimmt.