Ich habe eine neue Vorlagendatei erstellt template-home2.php
in einem WordPress-Theme.
Darin habe ich eine Zeile mit 3 Spalten, ich möchte jede dieser Spalten scrollbar machen, anstatt die gesamte Seite. Wie kann ich das erreichen?
ich habe ein klasse scrollable
die ich auf den äußeren Bereich der Seite anwende, um sie scrollbar zu machen.
<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>
Wenn ich die Klasse „scrollable“ aus dem Hauptabschnitt entferne und sie in die Spalte div einfüge, verschwindet die Spalte und die anderen 2 Spalten laufen auf den darunter liegenden Elementen über.
Dies ist das relevante 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;
}
Danke für Ihre Hilfe.
AKTUALISIERTER CODE
.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>
Können Sie bitte eine JS-Geige bereitstellen, nicht ganz sicher, was Sie erreichen möchten
– Tom Withers
26. Januar 2016 um 22:27 Uhr
Es wird schwierig sein, es in jsfiddle zum Laufen zu bringen. Aber würde eine Live-URL zur Website die Aufgabe erfüllen?
– Halnex
26. Januar 2016 um 22:50 Uhr
ja das würde funktionieren
– Tom Withers
26. Januar 2016 um 22:53 Uhr
@GuruTom Sie können sich das komplette Layout hier ansehen: utopic.vision/html – Im Moment habe ich der ersten Spalte die Klasse “scrollable” hinzugefügt, und deshalb ist sie unsichtbar.
– Halnex
26. Januar 2016 um 23:18 Uhr
ahh, Okay, Sie möchten also, dass jeder Block (Spalte) scrollbar ist?
– Tom Withers
26. Januar 2016 um 23:31 Uhr