web-dev-qa-db-ja.com

gatsby jsリンクコンポーネントを保持し、トップにリセットされていない

Gatsby 2.2.10を使用してWebサイトを設定しています。リンクコンポーネントは前のページのスクロール位置を保持し、クリックされたときに上部にスクロールしないでください。

<div className="Footer__legal body">
 <p>© {new Date().getFullYear()} My Nice Company</p>
 <Link to="/privacy-policy">Privacy Policy</Link>
 <Link to="/page-2">Page 2 Link component</Link>
</div>
 _

予想される動作：

[プライバシーポリシー]、[Page 2]、またはWebサイトの下部にあるページをクリックすると、ページがユーザーが上に戻ってからロードされます。

実際の動作：

ユーザーは現在のページのスクロール位置に留まります

reactjsgatsby
9
Jack David Evans

useEffect(() => window.scrollTo(0, 0), [])の問題を解決しました。私はFirefoxにのみ問題を抱えていましたが、Chromeにはありませんでした。 IDK問題を引き起こしていたものが今機能しています。

1
KMA Badshah

わかりました、これは古い質問ですが、最近同じ奇妙な行動に直面しました。私の問題は私が今までインターネットで見た他のすべてのソリューションとは異なりました。

GATSBYはgatsby-react-router-scrollというパッケージを使用します。このパッケージはGatsbyのスクロール動作を管理します。この動作は主に スクロールハンドラ コンポーネントに実装されています。このコンポーネントはcomponentDidUpdateメソッドでのみスクロールし、componentDidMount _ 1ではなくてください。 debuggerメソッドでcomponentDidMountを追加し、ScrollHandlerコンポーネントは各ナビゲーションで再マウントされていました。

修正プログラムは、このコンポーネントが各ナビゲーションでマウントされている理由を理解することでした。私の場合、私はReact.StrictModeのwrapRootElementのgatsby-browser.jsコンポーネントを持っていました。 StrictModeを削除するとScrollHandlerコンポーネントが安定しているため、問題を解決します。

1
Tiago Gimenes

Index.jsページをクラスベースのコンポーネントに変換することによって回避策を考え出し、次に追加した

  componentDidUpdate() {
    window.scrollTo(0,0);
  }

 _

クリーンな修正ではなく、なぜそれが自動的にスクロールされていなかったのか、来週のJSに行くので、私が答えを受けるならば、問題を尋ねるでしょう。

私は新しいプロジェクトを始めたので、私のスタイルと関係があると感じています、そしてGatsby-CLIは問題がなかった。これが問題を修正しているかどうかを確認するためのスタイルのリファクタリングになります。

注:次のマイケルの答えに戻って、それはoverflow: hidden;ボディ上に持っていたスタイルは、これを取り除くと私の問題を修正しました。

1
Jack David Evans

私の問題は私がhtml {height: 100%}を持っていたということでした。その規則を削除すると問題が解決されているようです。

私のプロジェクトでもgatsby-plugin-transition-linkを持っています。私のメインコンテンツの周りにもっとラッパーを追加しました。

0
Jay