Divの中のDiv - 別のスクロール

Question

私は、日、月、年が上にあるガントチャートとそれらの下のタスクを作成することを考えています。ここで

は、私がこれまで持っているものです。

したがって、上記の画像では、 scroll-xは、青、赤と黄色のdivとその下の灰色のdivを含め、すべてに取り組んでいます。これは、スクロールしていくうちに灰色のdivの内容を保持するようにするためです。 scroll-yは、青色の キャンペーン名 divの灰色のdivにのみ作用します。ここで

は問題です：

の問題は、（それが親のdivの真ん中に座っているように）あなたは親のscroll-x、画面全体scroll-y移動を移動すると、 。私が探しているのは、すべての親コンテンツにscroll-xの作業があり、スクロール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 div要素である、スクロールだ何を基準にしています。そして、残念ながら、それは2000pxのその全幅に設定されている場合は、それはそれはのようなので、オフスクリーンだからスクロール-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>

わかりませんあなたは何を求めていたのですか？スクロールバーを常にウィンドウに接続したい場合は、これらの個々のdivをスクロールせずにdate divのposition:fixedを使用する方がよいでしょう。

このソリューションでは、ビューポート単位（http://caniuse.com/#feat=viewport-units）とcalc（http://caniuse.com/#feat=calc）の両方を使用しています。また、提供したコードがあなたのスクリーンショットと一致しないため、私のコードはあなたのCSSを完全に反映しません。