固定位置リストで ScrollIntoView(true) を使用するとページ全体が移動するのはなぜですか?-CSSチュートリアル-php.cn

固定位置リストで ScrollIntoView(true) を使用するとページ全体が移動するのはなぜですか?

Barbara Streisand

リリース： 2024-11-16 07:52:02

オリジナル

635 人が閲覧しました

Why Does the Entire Page Move When Using ScrollIntoView(true) in a Fixed-Position List?

ScrollIntoView() と意図しないページ移動

質問:

ScrollIntoView(true) を使用して項目をスクロールする場合固定位置リストで表示しているのに、ページ全体が移動するのはなぜですかわずかに?

コンテキスト:

固定位置リスト (#listOfDivs) は、モバイルデバイスの Safari で AJAX 経由でロードされます。下方向のスクロールに ScrollIntoView(false) を使用すると期待どおりに機能しますが、上方向のスクロールに ScrollIntoView(true) を使用するとページ全体がmove.

構造:

#listOfDivs {
  position: fixed;
  top: 100px;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

ログイン後にコピー

<div>

ログイン後にコピー

答え:

ScrollIntoView(true) のデフォルトの動作ビューポートの上部から要素をスクロールして表示します。ページ全体が移動しないようにするには、動作オプションをスムーズ、ブロックオプションを最も近い、インラインオプションを開始として指定します:

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

ログイン後にコピー

Documentation:

ScrollIntoView メソッドの詳細については、Mozilla Developer Network (MDN) のドキュメントを参照してください。 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

以上が固定位置リストで ScrollIntoView(true) を使用するとページ全体が移動するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。