I am looking to dynamically change components based on user scrolling. Here is the behavior I want to achieve:
- When the user reaches the end of a component, the next component should load
- When the user reaches the top of a component, the previous component should load
- Each component should have its own router link/path
For example, if there are two components (ComponentA and ComponentB) with paths "/a" and "/b" respectively, they should be loaded inside a parent/wrapper component
I am currently working on detecting these changes in the parent component
import { Component, HostListener, ElementRef, Output, EventEmitter, OnInit } from '@angular/core';
import { Router } from "@angular/router"
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
@Output() mouseWheelUp = new EventEmitter();
@Output() mouseWheelDown = new EventEmitter();
@HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) {
this.mouseWheelFunc(event);
}
@HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) {
this.mouseWheelFunc(event);
}
@HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) {
this.mouseWheelFunc(event);
}
ngOnInit() {
}
mouseWheelFunc(event: any) {
let currentScrollPos = window.pageYOffset;
let elemStartsAt = this.ref.nativeElement.offsetTop;
var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
if(delta > 0) {
console.log("Up "+currentScrollPos+" "+elemStartsAt);
} else if(delta < 0) {
console.log("Down"+currentScrollPos+" "+elemStartsAt);
}
}
constructor(private router : Router) {}
}