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

Div 内での正確なスクロール

Web 開発では、Div 内で Web ページの一部をスクロールする必要がある状況に遭遇することがあります。 div要素。これを実現するには、scrollIntoView() メソッドを利用します。ただし、これを子要素に直接適用すると、div とともにページ全体がスクロールされることがよくあります。

この問題を回避するには、より制御されたアプローチを利用できます。 offsetTop プロパティを使用して、div コンテナ内の目的の要素の相対的な垂直位置 (またはオフセット) を決定します。

<code class="javascript">var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;</code>

この値は、div の上端とターゲット要素の間の距離を表します。

次に、div のscrollTop プロパティを使用して、計算されたオフセットまでスクロールします。

<code class="javascript">document.getElementById('scrolling_div').scrollTop = topPos;</code>

このアクションは、div を正確にスクロールして、ターゲット要素がコンテナの上部に表示されるようにします。

Prototype JS フレームワークのユーザー向けに、同様のソリューションが存在します。

<code class="javascript">var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];</code>

次の手順に従うことで、div 内を効率的にスクロールし、その境界内の特定の要素を表示できます。

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