Ionic 3 horizontal scrolling using button without showing scrollbar

Question

How to implement ion scroll in such a way that when we click on right arrow button it should move to the next element in the div in ion content in ionic 3. I don't want any scollbar in th UI. It should be hidden.

I already referred this link. How can I use content.scrollTo() for ion-scroll in ionic2?

This is not helping me bcoz when I run scrollElement is not getting recognized in ionic3. It has been deprecated.

Please add a StackBlitz link for the answer.

My code structure looks like

<ion-content>
<ion-row>
<ion-col>
<button ion-button>Left</button>
</ion-col>
<ion-scroll scrollX="true">
<div ngFor="let item of itemlist>
<button>{{item}}</button>
<div>
</ion-scroll>
</ion-col>
<ion-col>
<button ion-button>Right</button>
</ion-col>
</ion-row>
</ion-content>

score 0 · Answer 1 · answered Aug 28 '18 at 08:10

0

First your code is wrong, it should be like this;

    <ion-content>    
      <ion-row>
         <ion-col>
           <button ion-button>Left</button>
         </ion-col>
         <ion-scroll scrollX="true">
           <div ngFor="let item of itemlist">
             <button ion-button>{{item}}</button>
           </div>
         </ion-scroll>
         <ion-col>
           <button ion-button>Right</button>
         </ion-col>
     </ion-row>
   </ion-content>

You look this topic

answered Aug 28 '18 at 08:10

Omsl

170
1
12

I am not able to make it work. Plz help me with a working example in ionic3 – Chaitra R Aug 29 '18 at 10:25
Okey wait for my new answer. – Omsl Aug 29 '18 at 12:26

score 0 · Answer 2 · answered Aug 29 '18 at 12:31

First, plase examine this document.

For example:

in home.html

<ion-header>
  <ion-navbar>
    <ion-title>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div style="text-align: center;">
    <button ion-button (click)="scrollToBottom()">Scroll Bottom</button>

    <h1>Ionic 3 test</h1>
    <div *ngFor="let item of contentData">
      test content - {{item}}
    </div>
    <button ion-button (click)="scrollToTop()">Scroll Top</button>
  </div>
</ion-content>

in home.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, Content } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Content) content: Content;

  public contentData = [];

  constructor(public navCtrl: NavController) {
    for(let i = 0; i < 301; i++) {
      this.contentData.push(i);
    }
  }

  scrollToTop() {
    this.content.scrollToTop();
  }
  scrollToBottom() {
    this.content.scrollToBottom();
  }


}

We created a example data with for loop. After we have 2 buttons. Plase check to my code a new ionic project. You can shape it the way you want after reading the source you share.

Ionic 3 horizontal scrolling using button without showing scrollbar

2 Answers2