ブートストラップでスクロール可能な列を作成するにはどうすればよいですか？

Question

Wordpress Themeに新しいテンプレートファイルtemplate-home2.phpを作成しました。そこで

私は私ではなく、ページ全体のこれらの列のそれぞれがスクロールしたいと思い、3列と行を持っています。それをどうすれば実現できますか？

私はそれをスクロール可能にするために、ページの外側の部分に適用されるクラスscrollableを持っています。

<section class="<?php if(get_theme_mod('hide-player') == 0){ echo "w-f-md";} ?>" id="ajax-container"> 
    <section class="hbox stretch bg-black dker"> 
     <section> 
      <section class="vbox"> 
       <section class="scrollable"> 
        <div class="row"> 
         <div class="col-md-5 no-padder no-gutter"> 
          some data 
         </div> 
         <div class="col-md-4 no-padder no-gutter"> 
          some data 
         </div> 
         <div class="col-md-3 no-padder no-gutter"> 
          some data 
         </div> 
        </div> 
       </section> 
      </section> 
     </section> 
    </section> 
</section> 

Iは主部から「スクロール」クラスを削除し、カラムDIVに含める場合、列は消え、以下の要素上の他の2列のオーバーフロー。

これは、関連するCSSで

.scrollable { 
    overflow-x: hidden; 
    overflow-y: auto; 
} 
.no-touch .scrollable.hover { 
    overflow-y: hidden; 
} 
.no-touch .scrollable.hover:hover { 
    overflow: visible; 
    overflow-y: auto; 
} 
.slimScrollBar { 
    border-radius: 5px; 
    border: 2px solid transparent; 
    border-radius: 10px; 
    background-clip: padding-box !important; 
} 

あなたの助けをいただき、ありがとうございます。

更新されたコード

.homecol1, .homecol2, .homecol3 { 
    position: absolute; 
    overflow-y: scroll; 
} 

<section class="<?php if(get_theme_mod('hide-player') == 0){ echo "w-f-md";} ?>" id="ajax-container"> 
    <section class="hbox stretch bg-black dker"> 
     <section> 
      <section class="vbox"> 
       <section class="scrollable"> 
        <div class="row"> 
         <div class="col-md-5 no-padder no-gutter homecol1"> 
          some data 
         </div> 
         <div class="col-md-4 no-padder no-gutter homecol2"> 
          some data 
         </div> 
         <div class="col-md-3 no-padder no-gutter homecol3"> 
          some data 
         </div> 
        </div> 
       </section> 
      </section> 
     </section> 
    </section> 
</section> 

Answer 1

これを実現するには、まず各列classを与える必要があります。そして、あなたは彼らに、次の特性を付与する必要があります。

.your-class { 
    position: absolute; 
    overflow-y: scroll; 
} 

あなたはまた、私はさらにお手伝いしますこれが動作するかどうか教えてくださいしていない場合は、あなたのbodyプロパティにoverflow: hidden;

を与えたいと思うかもしれません！

編集：JSFiddle

https://jsfiddle.net/mjmwaqfp/2/