scss 离子水平卡片卷轴

Posted 2021-05-17

  <div scrollx="true" class="scrolling-cards">
    <ion-card>
      <ion-card-header>
        <ion-card-subtitle>This is a</ion-card-subtitle>
        <ion-card-title>Nice Card</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        This is some nice content
      </ion-card-content>
    </ion-card>

    <ion-card>
      <ion-card-header>
        <ion-card-subtitle>This is a</ion-card-subtitle>
        <ion-card-title>Nice Card</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        This is some nice content
      </ion-card-content>
    </ion-card>

    <ion-card>
      <ion-card-header>
        <ion-card-subtitle>This is a</ion-card-subtitle>
        <ion-card-title>Nice Card</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        This is some nice content
      </ion-card-content>
    </ion-card>
  </div>

div[scrollx=true], div[scrolly=true] {
    position: relative;
    overflow: hidden;

    ::-webkit-scrollbar {
        display: none;
    }
}
  
div[scrollx=true] {
    overflow-x: auto;
}
  
div[scrolly=true] {
    overflow-y: auto;
}