問題タブ [js-scrollintoview]

Element.scrollIntoView()として定義された遷移アニメーションでスクロール速度を調整する方法はありますかbehavior: "smooth"? どういうわけか、Chrome ではスクロールが遅すぎますが、Firefox では問題ありません。

反応アプリで、ボタンのクリックで新しいDOM要素がレンダリングされた後、DOM要素にスクロールしようとしています。しかし、スクロールは初めて機能しません。

スクロールは、状態変数が変更された後に発生する必要があります。したがって、コードをコールバックに入れました。

ビューにある場合にのみコンテンツをロードする遅延読み込みでページを最初にロードするときに、コンポーネントを表示しようとしています。例: - ページには 10 個のコンポーネントがあり、(パフォーマンスのために) 遅延読み込みを使用して最初の読み込みでコンポーネント番号 7 を表示/スクロールしたい。

これを正しく行うにはどうすればよいですか？ここでの課題は、これらのコンポーネントが遅延読み込みであり、scrollIntoView() を台無しにし、コンポーネントを通過して一番上までスクロールしすぎる巨大な画像を持っているためです。

• 私はこれらのアプローチを試しましたが、運がありません:(
• コンポーネント 7 への参照を配置します。
  1. scrollIntoView() でそのコンポーネントまでスクロールします。ナビゲーション バーには window.scrollBy(0, -100) を使用します。
  2. コンポーネント offsetTop を取得し、window.scrollTo(0, targetComponent.offsetTop - 100); を使用します。
  3. 上記の両方のアプローチですが、2s - 5s の setTimeout ではどちらも機能しませんでした。
  4. scrollIntoView() を使用してコンポーネントにスクロールし、setTimeout で数秒待ってから window.scrollBy(0, -100) で再度 scrollIntoView() を使用しても機能しませんでした。
  5. 画像コンテナーに固定の高さ (例: 500px) を指定すると、画像の遅延読み込みによってコンテナーがいっぱいになりますが、コンポーネントが他のページで使用されている場合、より大きなサイズの画像 (例: 1200px) を取得すると、UI が台無しになります。 .
  6. window.scrollY、window.pageYOffset、getBoundingClientRect().top、および必要な高さを取得するためのこれらの値は、コードの console.log とブラウザーの値を比較したコードとは異なるため、計算が正しくありません。
  7. scrollIntoView({ block: 'start' }) と window.scrollBy(0, -100) も機能しませんでした。window.scrollBy(0, -100)を使用したにもかかわらず、一番上までスクロールしてナビゲーションバーを通過しました。これでもsetTimeoutを試してみました。

私が試したこのようなものですが、コンポーネントはまだスクロールしすぎています。

ページが最初にアクセスしたときに、ナビゲーション バーのすぐ下 (高さ約 100px) にコンポーネントが表示されることを期待しています。私は解決策を探し、さまざまなことを試しましたが、まだこれに固執しています。

この機能 scrollIntoView を遅延読み込みコンテンツで動作させるために見逃したものはありますか? ありがとう！！

現在フォーカスされている要素がコンテナの中央に表示されるように、Javascript scrollIntoView 関数を使用してコンテナをスクロールしています。

addEventListener を使用して矢印キーをリッスンし、フォーカスしたい要素を変更します。次に、scrollIntoView を起動して、現在フォーカスされている要素にスクロールします。

フォーカスされた要素をゆっくりと変更すると、これはうまく機能しますが、フォーカスされた要素をすばやく変更し始めると、スクロールが「ほぼ」停止し、フォーカスされた要素の変更を停止するまで待機し、その要素がコンテナの中央に配置されます。

これは Google Chrome でのみ発生します。私は Firefox でテストしましたが、フォーカスされた要素をどれだけすばやく変更しても完全に機能します。

提案は他のブラウザと互換性がある必要はありません。また、この問題を解決するために Google Chrome の設定を変更することも問題ありません。これはローカルでの個人的な使用のみであり、Google Chrome を使用してのみ実行するためです。

考えられる問題

よくわかりませんが、Google Chrome は scrollIntoView を Firefox などとは異なる方法で処理していると思います。すぐに呼び出して、前のスクロールがまだ終了していない場合、実行の途中で前の scrollIntoView を停止します。これにより、要素がコンテナの中央に配置されず、scrollIntoView が再度呼び出され、計算が再実行されて現在のスクロール位置と、現在フォーカスされている要素をコンテナの中央に配置するために必要なスクロール量。複数の呼び出しが行われた場合、scrollIntoView 呼び出しへの最後の呼び出しのみが完全に実行されます。これは、scrollIntoView 呼び出しが完全に終了していないことがスクロールの遅延を引き起こしていることを意味します。

scrollIntoView オプション:

コードをテストしたブラウザ:

Chrome バージョン: 76.0.3809.100 (ラグ)

Firefox バージョン: 68.0.2 (スムーズ)