I have setup my html to jump from section to section each time the user clicks a button.
When I click a button on my website (not in production) scrollIntoView() does not properly execute. It registers within the DOM, but the browser does not visually show the scroll until I zoom in/out on the page, where it then ‘blinks’ the desired section into view (as if the scroll executed in the background, but not visually).
It will scroll into view once without having to zoom. After that, it stops working on Chrome only (firefox, no problem).
Here is how my different sections look in HTML (using angular)
app.component.ts
import { ChangeDetectorRef, Component, ElementRef, HostListener, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private chRef: ChangeDetectorRef){}
public isMobile:boolean | null = null;
@ViewChild("top", { static: false }) topRef!: ElementRef;
@ViewChild("about", {static:false}) aboutRef!: ElementRef;
@ViewChild("portfolio", {static:false}) portfolioRef!: ElementRef;
ngOnInit(){
}
ngAfterViewInit(){
this.chRef.detectChanges();
}
}
app.component.html
<div id="top" class="content scroller">
<section #top>
<app-navigation
id="top-nav"
class="navigation width-rng"
[elRef]="aboutRef"
></app-navigation>
</section>
<section #about>
<app-about-me
id="about"
[elRef]="portfolioRef"
></app-about-me>
</section>
<section #portfolio>
<app-portfolio
id="portfolio"
[isMobile]="isMobile"
></app-portfolio>
</section>
<app-nav-button class="mobile-nav mobile-nav__portfolio" [idTag]="topRef"></app-nav-button>
</div>
app-navigation and app-about-me have the app-nav-button nested within that component. app-portfolio does not, as I use the factory pattern to create templates for each project.
My button functionality uses a button component and a service.
nav-button.component.ts: reused to jump ahead to different sections of html.
export class NavButtonComponent {
@Input() idTag:ElementRef | undefined;
constructor(private scrollToService: ScrollToService) { }
onNavigateTo(){
console.log('Click event should fire ElementRef: ');
console.log(this.idTag!.nativeElement);
this.scrollToService.jumpTo(this.idTag);
}
}
scroll-to.service
import { ElementRef, Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ScrollToService {
constructor() {}
jumpTo(idTag:ElementRef | undefined):void{
if(idTag !== undefined){
setTimeout(()=>{
idTag.nativeElement.scrollIntoView({behavior:'smooth', block:'start'});
},300);
}
}
}
