faizaand
7/4/2019 - 1:34 AM

Horizontal card scroller for Ionic

component.html
content_copyfile_download

  <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>
style.scss
content_copyfile_download
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;
}