CODEWITHSUNDEEP
angulartypescriptscrollscrollbarangular2-template
Yogesh Ukale
Yogesh Ukale

Reputation: 153

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

Upvotes: 7

Views: 54158

Answers (2)

Praveen M P
Praveen M P

Reputation: 11614

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' });
        });
    }

  }

Upvotes: 12

rusev
rusev

Reputation: 1920

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;
  }
}

Upvotes: 19

Related Questions