web-dev-qa-db-ja.com

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

新しいテンプレートファイルを作成しましたtemplate-home2.php in a Wordpressテーマ。

そこには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>

メインセクションから「scrollable」クラスを削除し、それを列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>
csswordpresstwitter-bootstrapwordpress-theming
12
Halnex

これを実現するには、最初に各列にclassを指定する必要があります。次に、次のプロパティを提供する必要があります。

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

bodyプロパティにoverflow: hidden;

これが機能するかどうかを教えてください。そうでない場合は、さらにサポートします。

編集：JSFiddleを作成しました

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

9
Tom Withers