JavaScript を使用して要素までスクロールするにはどうすればよいですか?

JavaScript を使用して要素にスクロールするにはどうすればよいですか?

scrollIntoView() メソッドを使用して、Web ページ上の特定の要素にスクロールできます。このメソッドは、すべての主要なブラウザでサポートされています。

scrollIntoView() メソッドを使用するには、スクロールしたい要素を引数としてメソッドに渡すだけです。たとえば、次のコードは、ID が「divFirst」の要素にスクロールします。

document.getElementById("divFirst").scrollIntoView();

scrollIntoView() メソッドは、要素をスクロールして表示する方法を指定するオプションの 2 番目の引数を取ることができます。次の値が受け入れられます:

• "auto": 要素は、ページを現在の位置からスクロールすることなく、可能な限りスクロールされて表示されます。
• "smooth":要素は、アニメーション効果を使用してスムーズにスクロールして表示されます。
• 「必要な場合」: 要素は、まだ表示されていない場合にのみ、表示にスクロールされます。

たとえば、次のコードは、ID が「divFirst」の要素までスムーズにスクロールします。

document.getElementById("divFirst").scrollIntoView({behavior: "smooth"});

scrollIntoView() メソッドを使用して、要素内の特定のオフセットまでスクロールすることもできます。これを行うには、次のプロパティを持つオブジェクトをメソッドの 2 番目の引数として渡します:

• "block": 要素の上部からのオフセット (ピクセル単位)。
• "inline": 要素の左からのオフセット (ピクセル単位)。

たとえば、次のコードは、ID が「divFirst」の要素までスクロールし、上から 100 ピクセルずつオフセットします。左から 50 ピクセル:

document.getElementById("divFirst").scrollIntoView({block: 100, inline: 50});

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