Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to move div scroll position based on button click in angular 2

in app.component.html file i have one div element with horizontal scroll and two buttons as Next and Previous. based on these button click i want to move scroll.

app.component.html

<div id="th-infinite-scroll-tracker" style="overflow-y:scroll; height: 200px;" scrollTracker (scroll)="onScroll($event)" (mouseup)="searchLog($event)">
        <div *ngFor="let log of arr; let i = index" innerHTML="{{log}}" [id]="i"></div>
</div>
<button (click)="onPreviousSearchPosition()" [disabled]="disablePreviousBtn">Previous</button>
<button (click)="onNextSearchPosition()" [disabled]="disableNextBtn">Next</button>

app.component.ts

@HostListener('scroll', ['$event'])
onScroll(event){
    this.scrollObject = event;
}
onPreviousSearchPosition(){
    this.disableNextBtn = false;

    this.scrollObject.target.scrollTop = 20 * --this.idCount;
  }
onPreviousNextPosition(){
    this.disableNextBtn = false;

    this.scrollObject.target.scrollTop = 20 * ++this.idCount;
  }

using above code we can move the scroll but we need scroll event object which will get after scrolling manually. Please suggest me, how to create scroll event object in component class

like image 245
Yogesh Ukale Avatar asked May 11 '17 13:05

Yogesh Ukale


2 Answers

This is how you scroll the div element - https://plnkr.co/edit/2v0iVgkOZfISqlFAkrNX?p=preview

example:

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <div #panel style="overflow-y:scroll; height: 20px;" >
      <div *ngFor="let log of arr; let i = index" innerHTML="{{log}}" [id]="i"></div>
    </div>
    <button (click)="onPreviousSearchPosition()">Previous</button>
    <button (click)="onNextSearchPosition()">Next</button>
  `
})
export class AppComponent { 
  public arr = ['foo', 'bar', 'baz'];
  @ViewChild('panel', { read: ElementRef }) public panel: ElementRef<any>;

  public onPreviousSearchPosition(): void {
    this.panel.nativeElement.scrollTop -= 20;
  }

  public onNextSearchPosition(): void {
    this.panel.nativeElement.scrollTop += 20;
  }
}
like image 106
rusev Avatar answered Nov 06 '22 01:11

rusev


I would prefer to use scrollIntoView() method. This method provides smooth scrolling transition effect in the browser when we click on the corresponding element.

    @Component({
    selector: 'my-app',
    template: `
      <div #panel class="some-class">
        <div *ngFor="let log of arr; let i = index" innerHTML="{{log}}" [id]="i"></div>
      </div>
      <button (click)="moveToSpecificView()">Move</button>
    `
})
export class AppComponent {
    public arr = ['foo', 'bar', 'baz'];
    @ViewChild('panel') public panel:ElementRef;

    public moveToSpecificView()(): void {
        setTimeout(() => {
            this.panel.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
        });
    }

  }
like image 33
Praveen M P Avatar answered Nov 06 '22 01:11

Praveen M P