2017-07-07 12 views
7

リア・ルータを使用しているときに、戻るボタン(ヒストリーpopstate)のスクロール位置に問題が発生しました。リアクタールータv4は、ブラウザが何らかの自動スクロール動作を実装しているので、ボックスからのスクロール管理を処理しません。これは、ブラウザウィンドウの高さがあるビューから別のビューへと劇的に変化する場合を除いて、素晴らしいことです。私はここに記載されているようにScrollToTopコンポーネントを実装しました:https://reacttraining.com/react-router/web/guides/scroll-restoration反応ルータv4でスクロール復元をどのように処理するのですか?

これは素晴らしいです。リンクをクリックして別のコンポーネントに移動すると、ブラウザが上部にスクロールします(通常のサーバーレンダリングされたWebサイトのようになります)。この問題は、ウィンドウの高さがはるかに高いビューに(ブラウザの戻るボタンを使用して)戻るときにのみ発生します。反応がコンテンツ(およびブラウザの高さ)を表示する前に、(クロム)が前のページのスクロール位置に移動しようとしているようです。この結果、スクロールは表示されているビューの高さに基づいて行うことができます。このシナリオの画像:

View1:長いムービー(ウィンドウの高さ3500px)。
(ムービーがクリックされた)
VIEW2:詳細は、選択したムービーの表示(ウィンドウの高さ:1000px)。背面図1から
(ブラウザのバックボタンがクリックされた)
が、クロムが長い映画のリストをレンダリング反応する前の位置を設定しようとしているので、位置は、さらに1000px以上行くことができないスクロールします。

何らかの理由で、これはChromeでの問題です。 FirefoxとSafariはそれをうまく処理しているようだ。私は他の誰かがこの問題を抱えているのだろうと思っています。

注:すべてのムービーはsampleMovies.jsからインポートされるため、私の例ではAPIの応答を待っていません。

+0

ねえ、問題を解決しましたか?私はまったく同じ問題に直面しています –

答えて

1

スクロール復元をどのように処理しますか?

ブラウザには、history.scrollRestorationの実装があります。

多分あなたはそれを使用できますか?これらのリンクを確認してください。また https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration

https://developer.mozilla.org/en/docs/Web/API/History#Specificationsは、私は簡単に反応して復元をスクロール扱うことができるかもしれないNPMモジュールを見つけましたが、このライブラリは、ルータのV3を反応させて上下に動作します

https://www.npmjs.com/package/react-router-restore-scroll https://github.com/ryanflorence/react-router-restore-scroll

こちらがお役に立てば幸いです。

関連する問題