how to move div scroll position based on button click in angular 2
48,236
Solution 1
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;
}
}
Solution 2
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' });
});
}
}
Author by
Yogesh Ukale
Updated on September 27, 2020Comments
-
Yogesh Ukale over 3 years
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
-
SlimenTN over 6 years@YogeshUkale if it works then accept the answer so that any visitor can pay attention to it :)
-
Chris Haines over 6 yearsDo not use setImmediate, as it's non-standard. Source: developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate
-
vedankita kumbhar over 5 yearsHI @rusev what should I do if I want to disable buttons at scroll end. Can you please help