Ionic3 horizontal scroll + Click an element to scroll to an element

Html

<ion-row>        <ion-item no-lines>          <ion-scroll  #card scrollX="true" class="ion-scrall-style" >            <div #item (click)="onTap(avatar)" *ngFor="let avatar of avatars" class="scroll-item">                              </div>          </ion-scroll>        </ion-item>      </ion-row>

 

CSS:

 .ion-scrall-style{        white-space: nowrap;        min-height: 200px;        // height: 120px;        overflow: hidden;            .scroll-item {          display: inline-block;          background-color: #e74c3c;          // height: auto;          margin: 10px;        }      }

 

Hide the scroll bar:

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

 

Component

import { Component,AfterViewInit ,ViewChild, ViewChildren, ElementRef,QueryList} from ‘@angular/core‘;import { NavController, Scroll } from ‘ionic-angular‘;import { Content } from ‘ionic-angular‘;@Component({  selector: ‘page-home‘,  templateUrl: ‘home.html‘})export class HomePage implements AfterViewInit{    @ViewChild(‘card‘) card: any ;    // @ViewChild(‘item‘) tiem: ElementRef ;    @ViewChildren(‘item‘) items: QueryList<any>;    @ViewChild(‘cardContent‘) cardContent: any;    avatars:Array<string> = ["http://image.prntscr.com/image/15f7d1b8dca94296b249f56eb6cc78d3.png",     "http://image.prntscr.com/image/f2b0ac9e43334eddac9c1af05e573888.png",     "http://image.prntscr.com/image/6915d39cf813481fa3c19fa292c582ba.png" ,     "http://image.prntscr.com/image/ad357d428faf4e88ab3bdac78782b523.png",      "http://image.prntscr.com/image/7e98362d62b2490c998fe1472dcb0601.png" ,       ];      constructor(public navCtrl: NavController)  {  }  ngAfterViewInit() {     }onTap(src: string) {    // console.log(avatar);    let index = this.avatars.indexOf(src);    let element = this.items.toArray()[index];    this.card._scrollContent.nativeElement.scrollLeft = element.nativeElement.offsetLeft;}}

 

Ionic3 horizontal scroll + Click an element to scroll to an element