मैं बूटस्ट्रैप में स्क्रॉल करने योग्य कॉलम कैसे बना सकता हूं?

Question

मैंने वर्डप्रेस थीम में एक नई टेम्पलेट फ़ाइल 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> 

जब मैं मुख्य धारा से वर्ग "स्क्रॉल" को हटाने और स्तंभ div में शामिल, कॉलम गायब हो जाता है और नीचे तत्वों पर अन्य 2 कॉलम अतिप्रवाह।

यह प्रासंगिक सीएसएस

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