Je travaille sur une application Web angular2 pour laquelle j'ai besoin d'aide dans les domaines suivants ... .. Ma page est composée de plusieurs composants. Je souhaite faire défiler le haut de la page lorsque l'utilisateur clique sur un bouton. J'ai essayé document.body.scrollTop = 0;
mais cela ne fonctionne pas dans Chrome. J'ai essayé document.documentElement.scrollTop = 0; window.scrollTo (0, 0); mais ne fonctionne pas
importer comme ça,
import { Inject} from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';
Dans votre constructeur, ajoutez ceci,
constructor(@Inject(DOCUMENT) private document: Document) { }
Ensuite, vous pouvez définir le défilement n'importe où comme ça,
this.document.body.scrollTop = 0;
J'ai résolu mon problème de défilement angulaire à l'aide de la liaison de données:
<div class="container" [scrollTop]="scrollTop"> ... </div>
avec les styles:
.container {
height: 100%;
scroll: auto;
position: relative;
}
Dans app.component.ts
const mainDiv = document.getElementById('mainDIV');
mainDiv.scrollTop = 0;
Dans app.component.html
<div id="mainDIV" style="height: 100vh;overflow: auto;">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
Je propose d'écrire une directive pour cela. Assurez-vous de l'importer dans le module que vous utilisez.
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[scrollToTop]'
})
export class ScrollToTopDirective {
@HostListener('click')
public onClick() {
if (window && window.pageYOffset) {
window.scroll(0, 0);
}
}
}
et l'utiliser comme ci-dessous
<button scrollToTop>Scroll to Top</button>
Envisagez également d'ajouter le préfixe à la directive conformément aux meilleures pratiques angulaires.
Il suffit d'utiliser:
window.scroll(0, 0);
Veuillez utiliser le code ci-dessous. Pour mon cas
this.document.body.scrollTop = 0
ne fonctionne pas mais
this.document.documentElement.scrollTop = 0
travail. Donc, peut être une dépendance du navigateur.
import { Inject} from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';
constructor(@Inject(DOCUMENT) private document: Document) { }
this.document.documentElement.scrollTop = 0;
Si ce n'est pas un défilement de fenêtre, mais simplement div avec son propre parchemin, cela devrait fonctionner:
Gloabal service WindowRef:
import { Injectable } from '@angular/core';
function _window(): any {
// return the global native browser window object
return window;
}
@Injectable()
export class WindowRef {
get nativeWindow(): any {
return _window().document;
}
}
Ajoutez-le au constructeur:
constructor(private winRef: WindowRef) {}
Et dans le code, où vous voulez le mettre, ajoutez simplement cette ligne:
this.winRef.nativeWindow.getElementsByClass('nameOfClass')[0].scroll(0, 0);
Bien sûr, vous pouvez également utiliser d'autres sélecteurs tels que: getElementByTagName, getElementById, getElementByName ...
code HTML :
<div class="scroll-to-top" [ngClass]="{'show-scroll': navIsFixed}">
<button (click)="scrollToTop()">
Top
</button>
</div>
code css:
.scroll-to-top {
position: fixed;
bottom: 15px;
right: 15px;
opacity: 0;
transition: all .2s ease-in-out;
}
.show-scroll {
opacity: 1;
transition: all .2s ease-in-out;
}
ts code:
import {Component, OnInit, Inject, HostListener} from '@angular/core';
import { DOCUMENT } from "@angular/platform-browser";
import { BrowserModule } from '@angular/platform-browser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Hard Hitter@Cool';
navIsFixed: boolean;
constructor(@Inject(DOCUMENT) private document: Document){
}
@HostListener("window:scroll", [])
onWindowScroll() {
if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) {
this.navIsFixed = true;
} else if (this.navIsFixed && window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop < 10) { this.navIsFixed = false; } } scrollToTop() { (function smoothscroll() { var currentScroll = document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo(0, currentScroll - (currentScroll / 5));
}
})();
}
}