私はangular2のWebアプリケーションに取り組んでいますが、以下の点で助けが必要です。 私のページは複数のコンポーネントで構成されています。ユーザーがボタンをクリックしたときに、ページの上部をスクロールさせたいと思います。私は試しました document.body.scrollTop = 0;` ですが、これはChromeでは動作しません。document.documentElement.scrollTop=0;window.scrollTo(0, 0);を試してみましたが、うまくいきません。
のようにインポートします、
import { Inject} from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';
コンストラクタに以下を追加します、
constructor(@Inject(DOCUMENT) private document: Document) { }
そうすると、このように任意の場所にスクロールを設定することができます、
this.document.body.scrollTop = 0;
app.component.ts内
const mainDiv = document.getElementById('mainDIV');
mainDiv.scrollTop = 0;
app.component.html内
<div id="mainDIV" style="height: 100vh;overflow: auto;">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
そのための指令を書くことを提案します。 使用しているモジュールにインポートしてください。
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[scrollToTop]'
})
export class ScrollToTopDirective {
@HostListener('click')
public onClick() {
if (window && window.pageYOffset) {
window.scroll(0, 0);
}
}
}
以下のように使用します。
<button scrollToTop>Scroll to Top</button>
また、Angularのベストプラクティスに準拠して、プレフィックスをディレクティブに追加することを検討してください。
https://angular.io/guide/styleguide#directive-custom-prefix。
以下のコードを使用してください。 私の場合。
this.document.body.scrollTop = 0
動作していませんが。
this.document.documentElement.scrollTop = 0
作業。 したがって、ブラウザに依存している可能性があります。
import { Inject} from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';
constructor(@Inject(DOCUMENT) private document: Document) { }
this.document.documentElement.scrollTop = 0;
htmlコード:
<div class="scroll-to-top" [ngClass]="{'show-scroll': navIsFixed}">
<button (click)="scrollToTop()">
Top
</button>
</div>
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コード:
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));
}
})();
}
}
ウィンドウスクロールではなく、自分のスクロールでdivを実行する場合、これは機能します。
Gloabalサービス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;
}
}
コンストラクタに追加します。
constructor(private winRef: WindowRef) {}
そして、コードを配置する場合は、次の行を追加するだけです。
this.winRef.nativeWindow.getElementsByClass('nameOfClass')[0].scroll(0, 0);
もちろん、getElementByTagName、getElementById、getElementByNameなどの他のセレクターを使用することもできます。 ...