3

React には、react-router-scroll と呼ばれるものがあります: https://www.npmjs.com/package/react-router-scroll。React アプリのページを通常のサイトのようにスクロールさせます。したがって、各新しいページ (ルート) の一番上までスクロールし、過去のページのスクロール位置を保持します。戻るボタンをクリックすると、そのページでスクロールした場所が記憶されます。

私はAngular2でそのようなものを探しています。私は検索しましたが、それらしいものは見つかりませんでした。どこかにあるはずです。

4

2 に答える 2

3

次のように使用できるモジュールを作成しました。

1-

npm install scrollstore

2- app.module に移動します (すべてのルート モジュールをインポートする場所)。

import { ScrollStoreModule } from 'scrollStore';

3- ScrollStoreModule をアプリ モジュールに追加します。

@NgModule({
  bootstrap: [ AppComponent ],
  imports: [ 
    ScrollStoreModule, // put it here 
    BrowserModule,
    FormsModule,
    HttpModule 
    .. rest of your modules ....
  ]
})

export class AppModule { 
...

それでおしまい。

id の機能:

ルートを変更する前にルート名を保存し、その保存されたルートが sessionStorage に存在する場合は戻ると、その位置までスクロールし、そうでない場合はページの上部にスクロールします。

気軽に貢献してください。

于 2016-12-28T01:56:46.233 に答える
2

ルート変更を購読する

ルート イベントをサブスクライブすることができ、ユーザーが新しいルートに移動したときdocument.body.scrollTopに 0 を設定できます。要求されたルートに対してロードされるルート レベル コンポーネントに必ず含めてください。

成分

import { Component, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) { }
  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        document.body.scrollTop = 0;
      }
    });
  }
}
于 2016-12-27T21:33:46.333 に答える