Come posso creare colonne scorrevoli in Bootstrap?

Question

Ho creato un nuovo file modello template-home2.php in un tema Wordpress.

In là ho una riga con 3 colonne, vorrei far scorrere ciascuna di queste colonne invece dell'intera pagina. Come posso ottenerlo?

Ho una classe scrollable che applico alla sezione esterna della pagina per renderla scorrevole.

<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> 

Quando rimuovo la classe “scorrevole” dalla sezione principale e includerlo nel div colonna, questa scompare e l'altro 2 colonne di overflow sugli elementi sottostanti.

Questo è il 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; 
} 

Grazie per il vostro aiuto.

codice aggiornato

.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

Per raggiungere questo obiettivo, è necessario prima di dare ogni colonna un class. Allora avete bisogno di dare loro le seguenti proprietà:

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

si potrebbe anche voler dare il vostro body la proprietà overflow: hidden;

prego di dirmi se questo funziona e se non ti aiuto più!

Edit: Creato un JSFiddle

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