How to Do Horizontal Scroll in Ionic 3

how to do horizontal scroll in ionic 3

It looks like ion-row within your scroll is wrapping the items.

Try using nowrap attribute.

Adds flex-wrap: nowrap. Forces the columns to a single row.

<ion-scroll scrollX="true" style="width:100vw; height:50px" >
  <ion-row nowrap class="headerChip">
    <div *ngFor="let tabName of product_type; let idx = index" [ngClass]="showSelectedTabArray[idx].showSelectedTab ? 'headerChipGray' : 'headerChipGreen'">
    <ion-chip  (click)="changeData(tabName)">
    <ion-label  >{{tabName.languagename}}</ion-label>
    <div></div>
    </ion-chip>
    </div>
  </ion-row>
</ion-scroll>

How to enable horizontal scroll on IonGrid using Ionic 5-React

flex-wrap: nowrap;
overflow-x: scroll!important;
overflow-y: hidden;

How to Horizontal scroll in ionic 4 as ion-scroll working in ionic 3?

I have created horizontal scrolable gallery for images in ionic 4.
It work perfectly fine for me!

.thumnails{
  overflow-x: scroll;
  overflow-y: hidden;
  .list-thumbnail{
    height: 100%;
    white-space: nowrap;
    .img-thumb{
      display: inline-block;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 3px;
      width: 50px;
      height: 50px;
      margin:0 2px 0 0; 
      line-height: 60px;
    }
    .selected-img{
      border: 2px solid color($colors, primary);
    }
  }
}
::-webkit-scrollbar { 
  display: none; 
}

<div class="thumnails">
  <div class="list-thumbnail">
    <div class="img-thumb" [class.selected-img]="x.selected" *ngFor="let x of images" (click)="onThumbnailClick(x)">
      <img [src]="x.image">
    </div>
  </div>
</div>

Scroll to specific element in horizontal scroll bar - Ionic-2/3

Changed the ion-scroll to ion-content and made it's overflow-x value to scroll, then used scrollTO method to scroll to specific div.

---

Related Topics