我正在建立时间表:
我必须将位置标题固定在X轴上,而不要固定y(红色的小方框(Gassbar)),我这样做是这样的:
.container {
overflow-y: scroll;
width: 100%;
position: absolute;
}
.scroll-container {
min-width: 100%;
overflow: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
display: inline-block;
padding-bottom: 50px;
}
<div class="container">
<div *ngFor="let locations of dayselect; index as i" class="s{{i + 1}} no-flickr animated fadeIn fast delay-200ms">
<h5 class="no-flickr">{{locations.name}}</h5>
</div>
<div class="scroll-container" #onload (scroll)="onScroll($event)">
<div class="location animated fadeIn delay-800ms" *ngFor="let locations of dayselect; index as i">
<div class="gig-box" *ngFor="let d of locations?.eventSchedules; index as j" (click)="eventDetail(d.event.id)" [ngStyle]="{'width': d.duration * minute + 'px', 'left': (d.minutesFromStart * minute) + 30 + 'px'}">
<img [src]="d.event.imagePath" alt="">
<h4>{{d.event.name }}</h4>
<p>{{d?.startTime| slice:0:-3 }} - {{ d?.endTime | slice:0:-3}}</p>
</div>
</div>
<div *ngIf="dayselect" class="no-favs" padding>
<h3 *ngIf="dayselect.length == 0">Du hast für diesen Tag noch keine Favoriten gespeichert.</h3>
<p *ngIf="dayselect.length == 0">Füge Künstler und Spielzeiten zu deinen Favoriten hinzu und komme hierher zurück, um dein persönliches Lineup zu sehen.</p>
</div>
</div>
</div>
但是我的目标是container
中的所有内容都应该是可滚动的X和Y,但是当只能在一个方向上滚动时,应表现得像以前一样。
是否有CSS解决方案?