In Google Chrome, element.scrollIntoView() with behavior: 'smooth' doesn't work on multiple containers at the same time. As soon as smooth scrolling is triggered on one container, the second container stops scrolling. In Firefox, this problem doesn’t exist; both containers can scroll simultaneously.
My workaround is using behavior: 'instant', but I like to use behavior: 'smooth' for a better user experience.
Example
Here is a plunker using Angular
html
<p>
In Google Chrome element.scrollIntoView() with behavior 'smooth' doesn't work, if scrolling more containers at the same time.
Shwon in case 'All Smooth (200ms sequence)' the container stopps scrolling.
<br>
<br> In Firefox all works.
</p>
<div class="row mb-1">
<div class="col">
<button (click)="reset()" type="button" class="btn btn-secondary">Reset</button>
</div>
</div>
<div class="row mb-1">
<div class="col">
<button (click)="scrollAllInstant()" type="button" class="btn btn-secondary">All Instant</button>
<small class="text-success">Works</small>
</div>
</div>
<div class="row mb-1">
<div class="col">
<button (click)="scrollAllSmooth()" type="button" class="btn btn-secondary">All Smooth (simultaneously)</button>
<small class="text-danger">Only one container is scrolled</small>
</div>
</div>
<div class="row mb-1">
<div class="col">
<button (click)="scrollAllSmoothSequenced()" type="button" class="btn btn-secondary">All Smooth (200ms sequence)</button>
<small class="text-danger">Only last container is scrolled to 85 - Others will stop, if next container is triggered</small>
</div>
</div>
<div class="row">
<div *ngFor="let container of containers, let index = index" class="col">
<button (click)="scrollSingelContainer(container)" type="button" class="btn btn-secondary mb-1">Single Container Smooth</button>
<small class="text-success">Works</small>
<div class="card bg-light mb-3" style="height: 500px; max-width: 18rem;">
<div class="card-header">Container {{ container }}</div>
<div (scroll)="onScroll(container)" class="card-body" style="overflow-y: scroll;">
<p *ngFor="let number of content" [attr.id]="container + '_' + number" class="card-text" [class.text-danger]="number == 85">{{ number }}</p>
</div>
</div>
</div>
</div>
typescript
export class App {
name: string;
containers = [0, 1, 2]
content = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]
constructor() {
this.name = `Angular v${VERSION.full}`
}
private scroll(container: number, row: number, behavior: string) {
let element = document.getElementById(container + '_' + row);
element.scrollIntoView({
behavior: behavior,
block: 'start',
inline: 'nearest'
});
}
reset() {
this.containers.forEach(container => {
this.scroll(container, 1, 'instant');
});
}
scrollSingelContainer(container: number) {
this.scroll(container, 85, 'smooth');
}
scrollAllInstant() {
this.containers.forEach(container => {
this.scroll(container, 85, 'instant');
});
}
scrollAllSmooth() {
this.containers.forEach(container => {
this.scroll(container, 85, 'smooth');
});
}
scrollAllSmoothSequenced() {
this.containers.forEach(container => {
setTimeout(() => {
this.scroll(container, 85, 'smooth');
}, 200 * container);
});
}
onScroll(container: number) {
console.log('Scroll event triggerd by container ' + container);
}
}