Mixing
How to scroll with Router Navigation in Angular 7?
1
my sidebar navigation component sidebar.component.html is like this:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand" href="#page-top">
<span class="d-block d-lg-none">Sujoy Debnath</span>
<span class="d-none d-lg-block">
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/resume.jpg" alt="">
</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/education">Education</a>
</li>
</ul>
</div>
</nav>and the
sidebar.component.ts is like this:import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}when I click on About or Experience it Routes to those components as they are mapped in my app-routing-module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IntroductionComponent } from './introduction/introduction.component';
import { ExperienceComponent } from './experience/experience.component';
import { EducationComponent } from './education/education.component';
const routes: Routes = [
{path: '', redirectTo: '/about', pathMatch: 'full'},
{path: 'about', component: IntroductionComponent},
{path: 'experience', component: ExperienceComponent},
{path: 'education', component: EducationComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }my app.component.html is like this. I am calling the sidebar.component by its selector app-sidebar:
<router-outlet></router-outlet>
<app-sidebar></app-sidebar>Now how to route the navigation by scrolling such that when I scroll down it automatically moves down from about to experience to education or when I scroll up it automatically moves up from experience to education to about sections.
angular typescript scroll angular-routing asked Jan 1 at 18:54
Sujoy DebnathSujoy Debnath
173
|
show 4 more comments
1
my sidebar navigation component sidebar.component.html is like this:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand" href="#page-top">
<span class="d-block d-lg-none">Sujoy Debnath</span>
<span class="d-none d-lg-block">
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/resume.jpg" alt="">
</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/education">Education</a>
</li>
</ul>
</div>
</nav>and the
sidebar.component.ts is like this:import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}when I click on About or Experience it Routes to those components as they are mapped in my app-routing-module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IntroductionComponent } from './introduction/introduction.component';
import { ExperienceComponent } from './experience/experience.component';
import { EducationComponent } from './education/education.component';
const routes: Routes = [
{path: '', redirectTo: '/about', pathMatch: 'full'},
{path: 'about', component: IntroductionComponent},
{path: 'experience', component: ExperienceComponent},
{path: 'education', component: EducationComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }my app.component.html is like this. I am calling the sidebar.component by its selector app-sidebar:
<router-outlet></router-outlet>
<app-sidebar></app-sidebar>Now how to route the navigation by scrolling such that when I scroll down it automatically moves down from about to experience to education or when I scroll up it automatically moves up from experience to education to about sections.
angular typescript scroll angular-routing asked Jan 1 at 18:54
Sujoy DebnathSujoy Debnath
173
you should give more detail about the sidebar.component.html file.
– Darleison Rodrigues
Jan 1 at 19:10
So what you would like to do is something like this: - You are in "experience" page - Scroll up event detected - Go to "about" page - Is that right?
– Lorenzo Imperatrice
Jan 1 at 19:15
yes @LorenzoImperatrice .. exactly. I want to do that. so i can navigate even without clicking on the router-links.
– Sujoy Debnath
Jan 1 at 19:17
Ok, I'm going to try to solve your problem
– Lorenzo Imperatrice
Jan 1 at 19:18
thanks. in angular 7 router there are extra options for scrolling .. scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', but don't know how those helps in scrolling.
– Sujoy Debnath
Jan 1 at 19:26
|
show 4 more comments
1
1
1
my sidebar navigation component sidebar.component.html is like this:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand" href="#page-top">
<span class="d-block d-lg-none">Sujoy Debnath</span>
<span class="d-none d-lg-block">
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/resume.jpg" alt="">
</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/education">Education</a>
</li>
</ul>
</div>
</nav>and the
sidebar.component.ts is like this:import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}when I click on About or Experience it Routes to those components as they are mapped in my app-routing-module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IntroductionComponent } from './introduction/introduction.component';
import { ExperienceComponent } from './experience/experience.component';
import { EducationComponent } from './education/education.component';
const routes: Routes = [
{path: '', redirectTo: '/about', pathMatch: 'full'},
{path: 'about', component: IntroductionComponent},
{path: 'experience', component: ExperienceComponent},
{path: 'education', component: EducationComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }my app.component.html is like this. I am calling the sidebar.component by its selector app-sidebar:
<router-outlet></router-outlet>
<app-sidebar></app-sidebar>Now how to route the navigation by scrolling such that when I scroll down it automatically moves down from about to experience to education or when I scroll up it automatically moves up from experience to education to about sections.
angular typescript scroll angular-routing asked Jan 1 at 18:54
Sujoy DebnathSujoy Debnath
173
my sidebar navigation component sidebar.component.html is like this:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand" href="#page-top">
<span class="d-block d-lg-none">Sujoy Debnath</span>
<span class="d-none d-lg-block">
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/resume.jpg" alt="">
</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/education">Education</a>
</li>
</ul>
</div>
</nav>and the
sidebar.component.ts is like this:import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}when I click on About or Experience it Routes to those components as they are mapped in my app-routing-module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IntroductionComponent } from './introduction/introduction.component';
import { ExperienceComponent } from './experience/experience.component';
import { EducationComponent } from './education/education.component';
const routes: Routes = [
{path: '', redirectTo: '/about', pathMatch: 'full'},
{path: 'about', component: IntroductionComponent},
{path: 'experience', component: ExperienceComponent},
{path: 'education', component: EducationComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }my app.component.html is like this. I am calling the sidebar.component by its selector app-sidebar:
<router-outlet></router-outlet>
<app-sidebar></app-sidebar>Now how to route the navigation by scrolling such that when I scroll down it automatically moves down from about to experience to education or when I scroll up it automatically moves up from experience to education to about sections.
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand" href="#page-top">
<span class="d-block d-lg-none">Sujoy Debnath</span>
<span class="d-none d-lg-block">
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/resume.jpg" alt="">
</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/education">Education</a>
</li>
</ul>
</div>
</nav><nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand" href="#page-top">
<span class="d-block d-lg-none">Sujoy Debnath</span>
<span class="d-none d-lg-block">
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/resume.jpg" alt="">
</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/education">Education</a>
</li>
</ul>
</div>
</nav>import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IntroductionComponent } from './introduction/introduction.component';
import { ExperienceComponent } from './experience/experience.component';
import { EducationComponent } from './education/education.component';
const routes: Routes = [
{path: '', redirectTo: '/about', pathMatch: 'full'},
{path: 'about', component: IntroductionComponent},
{path: 'experience', component: ExperienceComponent},
{path: 'education', component: EducationComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IntroductionComponent } from './introduction/introduction.component';
import { ExperienceComponent } from './experience/experience.component';
import { EducationComponent } from './education/education.component';
const routes: Routes = [
{path: '', redirectTo: '/about', pathMatch: 'full'},
{path: 'about', component: IntroductionComponent},
{path: 'experience', component: ExperienceComponent},
{path: 'education', component: EducationComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }<router-outlet></router-outlet>
<app-sidebar></app-sidebar><router-outlet></router-outlet>
<app-sidebar></app-sidebar>asked Jan 1 at 18:54
Sujoy DebnathSujoy Debnath
173
asked Jan 1 at 18:54
Sujoy DebnathSujoy Debnath
173
edited Jan 1 at 19:30
Sujoy Debnath
asked Jan 1 at 18:54
Sujoy DebnathSujoy Debnath
173
asked Jan 1 at 18:54
Sujoy DebnathSujoy Debnath
173
asked Jan 1 at 18:54
Sujoy DebnathSujoy Debnath
173
173
you should give more detail about the sidebar.component.html file.
– Darleison Rodrigues
Jan 1 at 19:10
So what you would like to do is something like this: - You are in "experience" page - Scroll up event detected - Go to "about" page - Is that right?
– Lorenzo Imperatrice
Jan 1 at 19:15
yes @LorenzoImperatrice .. exactly. I want to do that. so i can navigate even without clicking on the router-links.
– Sujoy Debnath
Jan 1 at 19:17
Ok, I'm going to try to solve your problem
– Lorenzo Imperatrice
Jan 1 at 19:18
thanks. in angular 7 router there are extra options for scrolling .. scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', but don't know how those helps in scrolling.
– Sujoy Debnath
Jan 1 at 19:26
|
show 4 more comments
you should give more detail about the sidebar.component.html file.
– Darleison Rodrigues
Jan 1 at 19:10
So what you would like to do is something like this: - You are in "experience" page - Scroll up event detected - Go to "about" page - Is that right?
– Lorenzo Imperatrice
Jan 1 at 19:15
yes @LorenzoImperatrice .. exactly. I want to do that. so i can navigate even without clicking on the router-links.
– Sujoy Debnath
Jan 1 at 19:17
Ok, I'm going to try to solve your problem
– Lorenzo Imperatrice
Jan 1 at 19:18
thanks. in angular 7 router there are extra options for scrolling .. scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', but don't know how those helps in scrolling.
– Sujoy Debnath
Jan 1 at 19:26
you should give more detail about the sidebar.component.html file.
– Darleison Rodrigues
Jan 1 at 19:10
you should give more detail about the sidebar.component.html file.
– Darleison Rodrigues
Jan 1 at 19:10
So what you would like to do is something like this: - You are in "experience" page - Scroll up event detected - Go to "about" page - Is that right?
– Lorenzo Imperatrice
Jan 1 at 19:15
So what you would like to do is something like this: - You are in "experience" page - Scroll up event detected - Go to "about" page - Is that right?
– Lorenzo Imperatrice
Jan 1 at 19:15
yes @LorenzoImperatrice .. exactly. I want to do that. so i can navigate even without clicking on the router-links.
– Sujoy Debnath
Jan 1 at 19:17
yes @LorenzoImperatrice .. exactly. I want to do that. so i can navigate even without clicking on the router-links.
– Sujoy Debnath
Jan 1 at 19:17
Ok, I'm going to try to solve your problem
– Lorenzo Imperatrice
Jan 1 at 19:18
Ok, I'm going to try to solve your problem
– Lorenzo Imperatrice
Jan 1 at 19:18
thanks. in angular 7 router there are extra options for scrolling .. scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', but don't know how those helps in scrolling.
– Sujoy Debnath
Jan 1 at 19:26
thanks. in angular 7 router there are extra options for scrolling .. scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', but don't know how those helps in scrolling.
– Sujoy Debnath
Jan 1 at 19:26
|
show 4 more comments
1 Answer
1
active
oldest
votes
1
My example code is on
- /page1
- /page2
- /page3
and is activated when the wheel is used to scroll down and up, it's possible to implement the same thing that I did by adding other events (like with up and down arrow key)
In the app component, I set a window listener for wheel movement, check if the wheel is moving up or down, and last but not least navigate to the wanted route.
constructor(
private router: Router
) { }
@HostListener('window:wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll down
if (evento.deltaY > 0) {
switch (this.router.url) {
case '/page1': {
this.router.navigate(['/page2'])
break
}
case '/page2': {
this.router.navigate(['/page3'])
break
}
case '/page3': {
break
}
}
} else { // Scroll up
switch (this.router.url) {
case '/page1': {
break
}
case '/page2': {
this.router.navigate(['/page1'])
break
}
case '/page3': {
this.router.navigate(['/page2'])
break
}
}
}
}
This is just one of many solutions.
If you want that the event is emitted only if the wheel is scrolled inside the component you can do like this too:
introduction.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll up
if (evento.deltaY > 0) {
this.router.navigate(['experience'])
}
}
experience.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll down
if (evento.deltaY > 0) {
this.router.navigate(['education'])
} else { // Scroll up
this.router.navigate(['about'])
}
}
education.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll up
if (evento.deltaY < 0) {
this.router.navigate(['experience'])
}
}
answered Jan 2 at 8:52
Lorenzo ImperatriceLorenzo Imperatrice
329213
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998080%2fhow-to-scroll-with-router-navigation-in-angular-7%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
My example code is on
- /page1
- /page2
- /page3
and is activated when the wheel is used to scroll down and up, it's possible to implement the same thing that I did by adding other events (like with up and down arrow key)
In the app component, I set a window listener for wheel movement, check if the wheel is moving up or down, and last but not least navigate to the wanted route.
constructor(
private router: Router
) { }
@HostListener('window:wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll down
if (evento.deltaY > 0) {
switch (this.router.url) {
case '/page1': {
this.router.navigate(['/page2'])
break
}
case '/page2': {
this.router.navigate(['/page3'])
break
}
case '/page3': {
break
}
}
} else { // Scroll up
switch (this.router.url) {
case '/page1': {
break
}
case '/page2': {
this.router.navigate(['/page1'])
break
}
case '/page3': {
this.router.navigate(['/page2'])
break
}
}
}
}
This is just one of many solutions.
If you want that the event is emitted only if the wheel is scrolled inside the component you can do like this too:
introduction.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll up
if (evento.deltaY > 0) {
this.router.navigate(['experience'])
}
}
experience.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll down
if (evento.deltaY > 0) {
this.router.navigate(['education'])
} else { // Scroll up
this.router.navigate(['about'])
}
}
education.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll up
if (evento.deltaY < 0) {
this.router.navigate(['experience'])
}
}
answered Jan 2 at 8:52
Lorenzo ImperatriceLorenzo Imperatrice
329213
add a comment |
1
My example code is on
- /page1
- /page2
- /page3
and is activated when the wheel is used to scroll down and up, it's possible to implement the same thing that I did by adding other events (like with up and down arrow key)
In the app component, I set a window listener for wheel movement, check if the wheel is moving up or down, and last but not least navigate to the wanted route.
constructor(
private router: Router
) { }
@HostListener('window:wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll down
if (evento.deltaY > 0) {
switch (this.router.url) {
case '/page1': {
this.router.navigate(['/page2'])
break
}
case '/page2': {
this.router.navigate(['/page3'])
break
}
case '/page3': {
break
}
}
} else { // Scroll up
switch (this.router.url) {
case '/page1': {
break
}
case '/page2': {
this.router.navigate(['/page1'])
break
}
case '/page3': {
this.router.navigate(['/page2'])
break
}
}
}
}
This is just one of many solutions.
If you want that the event is emitted only if the wheel is scrolled inside the component you can do like this too:
introduction.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll up
if (evento.deltaY > 0) {
this.router.navigate(['experience'])
}
}
experience.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll down
if (evento.deltaY > 0) {
this.router.navigate(['education'])
} else { // Scroll up
this.router.navigate(['about'])
}
}
education.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll up
if (evento.deltaY < 0) {
this.router.navigate(['experience'])
}
}
answered Jan 2 at 8:52
Lorenzo ImperatriceLorenzo Imperatrice
329213
add a comment |
1
1
1
My example code is on
- /page1
- /page2
- /page3
and is activated when the wheel is used to scroll down and up, it's possible to implement the same thing that I did by adding other events (like with up and down arrow key)
In the app component, I set a window listener for wheel movement, check if the wheel is moving up or down, and last but not least navigate to the wanted route.
constructor(
private router: Router
) { }
@HostListener('window:wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll down
if (evento.deltaY > 0) {
switch (this.router.url) {
case '/page1': {
this.router.navigate(['/page2'])
break
}
case '/page2': {
this.router.navigate(['/page3'])
break
}
case '/page3': {
break
}
}
} else { // Scroll up
switch (this.router.url) {
case '/page1': {
break
}
case '/page2': {
this.router.navigate(['/page1'])
break
}
case '/page3': {
this.router.navigate(['/page2'])
break
}
}
}
}
This is just one of many solutions.
If you want that the event is emitted only if the wheel is scrolled inside the component you can do like this too:
introduction.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll up
if (evento.deltaY > 0) {
this.router.navigate(['experience'])
}
}
experience.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll down
if (evento.deltaY > 0) {
this.router.navigate(['education'])
} else { // Scroll up
this.router.navigate(['about'])
}
}
education.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll up
if (evento.deltaY < 0) {
this.router.navigate(['experience'])
}
}
answered Jan 2 at 8:52
Lorenzo ImperatriceLorenzo Imperatrice
329213
My example code is on
- /page1
- /page2
- /page3
and is activated when the wheel is used to scroll down and up, it's possible to implement the same thing that I did by adding other events (like with up and down arrow key)
In the app component, I set a window listener for wheel movement, check if the wheel is moving up or down, and last but not least navigate to the wanted route.
constructor(
private router: Router
) { }
@HostListener('window:wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll down
if (evento.deltaY > 0) {
switch (this.router.url) {
case '/page1': {
this.router.navigate(['/page2'])
break
}
case '/page2': {
this.router.navigate(['/page3'])
break
}
case '/page3': {
break
}
}
} else { // Scroll up
switch (this.router.url) {
case '/page1': {
break
}
case '/page2': {
this.router.navigate(['/page1'])
break
}
case '/page3': {
this.router.navigate(['/page2'])
break
}
}
}
}
This is just one of many solutions.
If you want that the event is emitted only if the wheel is scrolled inside the component you can do like this too:
introduction.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll up
if (evento.deltaY > 0) {
this.router.navigate(['experience'])
}
}
experience.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll down
if (evento.deltaY > 0) {
this.router.navigate(['education'])
} else { // Scroll up
this.router.navigate(['about'])
}
}
education.component.ts
HostListener('wheel', ['$event'])
onWheelScroll(evento: WheelEvent) {
// Scroll up
if (evento.deltaY < 0) {
this.router.navigate(['experience'])
}
}
answered Jan 2 at 8:52
Lorenzo ImperatriceLorenzo Imperatrice
329213
edited Jan 2 at 12:51
answered Jan 2 at 8:52
Lorenzo ImperatriceLorenzo Imperatrice
329213
answered Jan 2 at 8:52
Lorenzo ImperatriceLorenzo Imperatrice
329213
answered Jan 2 at 8:52
Lorenzo ImperatriceLorenzo Imperatrice
329213
329213
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998080%2fhow-to-scroll-with-router-navigation-in-angular-7%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you should give more detail about the sidebar.component.html file.
– Darleison Rodrigues
Jan 1 at 19:10
So what you would like to do is something like this: - You are in "experience" page - Scroll up event detected - Go to "about" page - Is that right?
– Lorenzo Imperatrice
Jan 1 at 19:15
yes @LorenzoImperatrice .. exactly. I want to do that. so i can navigate even without clicking on the router-links.
– Sujoy Debnath
Jan 1 at 19:17
Ok, I'm going to try to solve your problem
– Lorenzo Imperatrice
Jan 1 at 19:18
thanks. in angular 7 router there are extra options for scrolling .. scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', but don't know how those helps in scrolling.
– Sujoy Debnath
Jan 1 at 19:26