Div içindeki Div - ayrı kaydırma

Question

Günler, aylar ve yıllar boyunca en üstteki görevleri ve bunların altındaki görevleri içeren bir gantt grafiği oluşturmak istiyorum. İşte

Bugüne kadar ne var:

Yani yukarıdaki resimde, scroll-x, mavi, kırmızı ve sarı divlere ve altlarındaki gri div dahil her şey üzerinde çalışıyor. Bu, karşınızdayken, günlerin gri bölümün içeriğiyle kalmasını sağlamaktır. scroll-y sadece mavi kampanya adı div ile gri div üzerinde hareket ediyor. İşte

sorundur:

sorun olduğunu (o üst div ortasında oturuyor, böylece) Eğer ebeveyn scroll-x, ekran boyunca scroll-y hamle taşıdığınızda . Yapmam gereken şey, tüm ebeveynin içeriği üzerinde scroll-x çalışmasına sahip olmak ve kaydırma-y yalnızca gri div üzerinde çalışmak, ancak kaydırma çubuğunun ebeveynin en sağında kalmasıdır. Herhangi bir tavsiye gerçekten takdir edilecektir ve şimdiden teşekkürler.

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

Yani, kaydırma o burada, hold-content div olan kaydırma her neyse göre olur. Ve ne yazık ki, o 2000 piksel arasında tam genişliğine ayarlı iken, bu kadar gibi pek gözükmeyen, çünkü kaydırma-y kaydırma çubuğu görünmüyorsa gelir: o ideal veya eğer

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>

emin değil ne için gidiyordun? Kaydırma çubuğunun her zaman pencereye bağlı olmasını istiyorsanız (varsayılan olarak olduğu gibi), muhtemelen bu ayrı div'leri kaydırmamanız ve date div'larınızda position:fixed'u kullanmanız daha iyidir.

Bu çözümün hem görünüm birimleri (http://caniuse.com/#feat=viewport-units) hem de calc (http://caniuse.com/#feat=calc) kullandığını unutmayın. Ayrıca, sağladığınız kod ekran görüntülerinizle eşleşmediğinden kodum CSS'nizi mükemmel bir şekilde yansıtmıyor.