包装好的滚动容器,其中隐藏了溢出

时间:2018-08-26 09:31:04

标签: javascript css ionic-framework

我正在建立时间表:

enter image description here

我必须将位置标题固定在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解决方案?

0 个答案:

没有答案