Horizontal avatars scroll inside a list

[herre]

I achieved the horizontal scroll with several ionic components:

ion-avatar scrollable HTML

<ion-content>
<ion-row>
    <ion-item no-lines>
    <ion-scroll scrollX="true" scroll-avatar>
        <ion-avatar>
          <img src="../../assets/whatever.png" *ngFor="let avatar of avatars" class="scroll-item"/>
        </ion-avatar>
    </ion-scroll>
    </ion-item>
  </ion-row>
</ion-content>

ion-icon scrollable HTML

<ion-content>
  <ion-row>
    <ion-item no-lines>
      <ion-scroll scrollX="true">
        <ion-icon *ngFor="let avatar of avatars" name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
      </ion-scroll>
    </ion-item>
  </ion-row>
</ion-content>

SCSS

  ion-scroll[scrollX] {
    white-space: nowrap;
    height: 120px;
    overflow: hidden;

    .scroll-item {
      display: inline-block;
    }

    .selectable-icon{
      margin: 10px 20px 10px 20px;
      color: red;
      font-size: 100px;
    }

    ion-avatar img{
      margin: 10px;
    }
  }

  ion-scroll[scroll-avatar]{
    height: 60px;
  }

  /* Hide ion-content scrollbar */
  ::-webkit-scrollbar{
    display:none;
  }

That worked for me with ionic 3.2.0 version.