How to perform auto scroll list in Angular6?

Question

Hi I was trying to implement auto scroll on page init , But i did not get the solution is there any in build method in Angular ?

I have tried

import { Component } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  keyframes
} from '@angular/animations';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('popOverState', [
      state('show', style({
        opacity: 1
      })),
      state('hide',   style({
        opacity: 0
      })),
      transition('* => movedown',
          animate('2000ms', keyframes([
            style({top: '0%'}),
            style({top: '100%'}),
          ])
        )),
      transition('* => moveup',
          animate('2000ms', keyframes([
            style({top: '100%'}),
            style({top: '0%'}),
          ])
        )),
      transition('show => hide', animate('600ms ease-out')),
      transition('hide => show', animate('1000ms ease-in'))
    ])
  ]
})
export class AppComponent {
  title = 'my-app';
  switchOne = 'one';
  user = {
    detail: 'name'
  }
  items = [1,2,3,4,5,6,7,8,9,10,11,212,121,121,12,12,12,12,12,12,12,12,1,21,2,12,12,1,21,21,2,1,21,2,12,1,21,2,12,1,21,2,1,2,1323221,3,23,2,32,3,2,32,3,2,3];
  show = false;
  scroll = false;

  get stateName() {
    return this.show ? 'show' : 'hide'
  }

  get moveName() {
    return this.scroll ? 'movedown' : 'moveup';
  }
  toggle() {
    this.show = !this.show;
  }
  move() {
    this.scroll = !this.scroll;
  }


}

The moveup and movedown animations makes the element move top and bottom but the need is auto scroll.

  <li [@popOverState]="moveName" *ngFor="let item of items; index as i; trackBy: trackByFn">
    {{i}}
  </li>

I want scroll item Any solution ?

where you want to scroll, i mean which item you want to scroll to? — Nithya Rajan, Feb 28 '19 at 12:20

score 0 · Answer 1 · answered Feb 28 '19 at 13:06

Solution: You can use to scrollTo API to achieve this. As far as I know there is no out of the box solution provided by angular animations.

How to: To get the correct coordinates you need to calculate the height of one element (use - getBoundingClientRect API).

Advantage over angular-animateion: This is a solution wich for sure works and also is pretty fluent and powerfull because of its native browser support.

How to perform auto scroll list in Angular6?

1 Answers1