スクロール Div 内の特定の要素までスクロールするにはどうすればよいですか?

スクロール Div 内の要素を見つけてスクロールする方法

スクロール Div を操作する場合、多くの場合、特定の要素までスクロールする必要があります。イベント発生時の div 内の要素。ただし、要素自体で単純にscrollIntoView関数を使用すると、ページ全体がスクロールするなどの予期しない動作が発生する可能性があります。

この問題に対処するには、次の手順を実行できます:

ターゲット要素の上部オフセットを取得します:

ターゲット要素の上部とその親スクロール div コンテナーの上部の間の垂直距離を計算します。この値は上部オフセットとして知られています:

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

Div のスクロール位置を設定します:

スクロール Div のscrollTop プロパティを使用してスクロールを設定します。ターゲット要素の上部オフセットへの位置:

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

これは、ターゲット要素が上部、または div の表示領域内でできるだけ上部に近づくように div をスクロールします。

プロトタイプ JS フレームワークを使用している場合は、次のコードを使用することもできます。

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

これらの手順に従うことで、スクロール div がスムーズに移動して指定された要素を表示できるようになります。コンテンツ内で意図しないページスクロールを回避します。

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