個々の列のCSSを水平スクロールでスクロールする

Question

情報の列を持つUIコンポーネントを構築しています。各列は個別にスクロール可能である必要があります。私は前にSO.comでそれを見つけましたが、他の要件との調整に問題があります。ページが画面に収まらない列を表示するために水平にスクロールします。

私は水平スクロール機能を持​​っていますが、個々のカラムスクロール機能と併用することはできません。コード：

#board { 
    float: left; 
    height: 98%; 
    max-height: 98%; 
    width: 4300px; /*smaller than columns to force horizontal scroll */ 
    margin: auto; 
    border: none; 
    overflow-x: scroll; 
} 

#columns { 
    height: 98%; 
    float: left; 
    width: 4800px; /* need this much width */ 
    margin: auto; 
    border: none; 
    overflow-x:auto; 
} 

.column { 
    float: left; 
    padding-bottom: 50px; 
    width: 240px; 
    height: 100%; 
    max-height: 100%; 
    padding: 5px; 
    padding-bottom: 100px; 
    margin-left: 5px; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

<div id="board"> 
    <div id="columns"> 
     <div id="col1" class="column"> 
      <div class="card"> ...content... </div> 
      <div class="card"> ...content... </div> 
      <div class="card"> ...content... </div> 
      <div class="card"> ...content... </div> 
     </div> 
     <div id="col2" class="column"> 
      <div class="card"> ...content... </div> 
      <div class="card"> ...content... </div> 
      <div class="card"> ...content... </div> 
      <div class="card"> ...content... </div> 
     </div> 
     <!-- 12-16 more columns --> 
    </div> 
</div> 

idで対クラスの問題を修正しました。

Answer 1

あなたの問題を解決するために必要なものだけを含めるようにコードを単純化しようとしましたが、うまくいくはずです。 #boardsのスタイルがありますが、外側のコンテナにはIDがないクラスboardsがあり、#columnsのスタイルがありますが、中間の内側のコンテナのIDはpositionsです。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.board { 
 
    height: 100%; 
 
    width: 200px; 
 
    overflow-x: scroll; 
 
} 
 
#columns { 
 
    height: 100%; 
 
    width: 500px; 
 
    white-space: nowrap; 
 
} 
 
.column { 
 
    vertical-align: top; 
 
    height: 100%; 
 
    display: inline-block; 
 
    width: 150px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 
.card { 
 
    height: 200px; 
 
    background: #F00; 
 
    margin-bottom: 5px; 
 
}

<div class="board"> 
 
    <div id="columns"> 
 
    <div class="column"> 
 
     <div class="card">...content...</div> 
 
     <div class="card">...content...</div> 
 
     <div class="card">...content...</div> 
 
     <div class="card">...content...</div> 
 
    </div> 
 
    <div class="column"> 
 
     <div class="card">...content...</div> 
 
     <div class="card">...content...</div> 
 
     <div class="card">...content...</div> 
 
    </div> 
 
    <div class="column"> 
 
     <div class="card">...content...</div> 
 
    </div>