I provide a seamless full-page scrolling experience using the mouse wheel.
However, the scrollIntoView function does not seem to function within the @HostListener('wheel', ['$event']).
Here is a snippet from app.component.html file:
<div #page *ngFor="let page of [0,1,2,3,4]" [class]="'vh-100 p-3 bg-' + (page + 1)">
<h3 class="text-white">Page {{page + 1}}</h3>
<div class="page-content">
<h3>Lorem Ipsum</h3>
<p>beatae esse velit laudantium nam eligendi possimus</p>
</div>
</div>
<div class="nav">
<button #prev class="btn btn-sm btn-light me-1" (click)="clickPrev()">prev</button>
<button #next class="btn btn-sm btn-light" (click)="clickNext()">next</button>
</div>
From app.component.ts file:
// Code logic and functionality here...
Link to Stackblitz for reference
An alternative approach that involves JavaScript and works with document.addEventListener('wheel', (event: WheelEvent) => {})
Another example with working functionality
Any insights on how to make ScrollIntoView work within the @HostListener('wheel', ['$event'])?