web-dev-qa-db-fra.com

Comment puis-je créer des colonnes déroulantes dans Bootstrap?

J'ai créé un nouveau fichier de modèle template-home2.php dans un thème Wordpress.

Là, j'ai une ligne avec 3 colonnes, je voudrais faire défiler chacune de ces colonnes au lieu de la page entière. Comment puis-je y parvenir?

J'ai une classe scrollable que j'applique à la section externe de la page pour la faire défiler.

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

Lorsque je supprime la classe "scrollable" de la section principale et l'inclue dans la colonne div, la colonne disparaît et les 2 autres colonnes débordent sur les éléments ci-dessous.

Ceci est le CSS pertinent

.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;
}

Merci de votre aide.

CODE MIS À JOUR

.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>
csswordpresstwitter-bootstrapwordpress-theming
12
Halnex

Pour ce faire, vous devez d'abord attribuer à chaque colonne un class. Ensuite, vous devez leur donner les propriétés suivantes:

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

Vous pouvez également donner à votre body la propriété overflow: hidden;

Dites-moi si cela fonctionne et sinon je vous aiderai davantage!

Edit: créé un JSFiddle

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

9
Tom Withers