MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Smooth scroll: Fix headerOffset in mobile

This commit is contained in:
Konstantinos Triantafyllou 2022-12-09 18:17:06 +02:00
parent 2492f737b8
commit 437a5fa50d
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dashboard/sharedComponents/sidebar/layout.service.ts
View File

@ -239,4 +239,8 @@ export class LayoutService {
get isMobile(): Observable<boolean> { get isMobile(): Observable<boolean> {
return this.isMobileSubject.asObservable(); return this.isMobileSubject.asObservable();
} }
get isMobileValue(): boolean {
return this.isMobileSubject.getValue();
}
} }

7
utils/smooth-scroll.ts
View File

@ -1,6 +1,7 @@
import {ActivationStart, NavigationEnd, Router} from '@angular/router'; import {ActivationStart, NavigationEnd, Router} from '@angular/router';
import {Injectable, Type} from '@angular/core'; import {Injectable, Type} from '@angular/core';
import {Subscription} from 'rxjs'; import {Subscription} from 'rxjs';
import {LayoutService} from "../dashboard/sharedComponents/sidebar/layout.service";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -12,7 +13,7 @@ export class SmoothScroll {
private currentComponent: string; private currentComponent: string;
private extraOffset: number = 0; private extraOffset: number = 0;
constructor(private router: Router) { constructor(private router: Router, private layoutService: LayoutService) {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
this.sub = router.events.subscribe(event => { this.sub = router.events.subscribe(event => {
if (event instanceof ActivationStart) { if (event instanceof ActivationStart) {
@ -21,7 +22,7 @@ export class SmoothScroll {
this.currentComponent = event.snapshot.component.name; this.currentComponent = event.snapshot.component.name;
} }
} else if (event instanceof NavigationEnd) { } else if (event instanceof NavigationEnd) {
let headerOffset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')) + 35; let headerOffset = (this.layoutService.isMobileValue?0:Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'))) + 35;
if(!this.router.getCurrentNavigation().extras?.state?.disableScroll) { if(!this.router.getCurrentNavigation().extras?.state?.disableScroll) {
if (this.interval) { if (this.interval) {
clearInterval(this.interval); clearInterval(this.interval);
@ -46,7 +47,7 @@ export class SmoothScroll {
position = element.getBoundingClientRect().top; position = element.getBoundingClientRect().top;
} else { } else {
clearInterval(interval); clearInterval(interval);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset; const y = element.getBoundingClientRect().top + window.scrollY + yOffset;
window.scrollTo({top: y, behavior: 'smooth'}); window.scrollTo({top: y, behavior: 'smooth'});
} }
}, 50); }, 50);