JavaScript を使用して DIV 要素までスクロールしてビューポートでの可視性を確保するにはどうすればよいですか?

JavaScript を使用した DIV 要素へのスクロール

コードは、指定された DIV 要素を表示し、ページのビューポートに表示しようとします。ただし、この方法だけでは、特にページがビューポートよりも長い場合、要素が表示されない可能性があります。

要素までスクロールして表示するには、scrollIntoView() メソッドを使用できます。 。この方法は、ほとんどの最新のブラウザでサポートされています。実装方法は次のとおりです。

<code class="javascript">document.getElementById("divFirst").scrollIntoView();</code>

このコードは、ビューポート内で divFirst 要素が完全に表示される位置までページをスクロールします。 scrollIntoView のオプションのパラメータを使用すると、ビューポート内の要素の配置を指定できます。

• scrollIntoView() は、要素の上部をビューポートの上部に揃えて、要素をビューにスクロールします。
• scrollIntoView(true) は、要素の上部をビューポートの下部に合わせてビューにスクロールします。

特定のシナリオでは、scrollIntoView() を単独で使用すると、 divFirst 要素をビューに追加します。期待どおりに動作しない場合は、ページのスクロール動作に影響を与える他の要因がある可能性があります。 scrollIntoView およびページ スクロールに関連するその他のメソッドの詳細については、MDN ドキュメントを参照してください:

• https://developer.mozilla.org/en-US/docs/Web/API/Element。 scrollIntoView

以上がJavaScript を使用して DIV 要素までスクロールしてビューポートでの可視性を確保するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。