ページ全体をスクロールせずに、div をその中の特定の要素まで自動的にスクロールするにはどうすればよいですか?

Div 内の要素へのスクロール

スクロールされた div をクリックすると、その中の要素まで自動的にスクロールするようにプログラムすることを目的としています。 scrollIntoView(true) を使用すると、ページ全体がスクロールされるようで、困惑したままになります。

解決策:

この問題に対処するには、ページの上部のオフセットを決定する必要があります。 target 要素は、その親であるスクロール div コンテナに相対します。これは次の方法で実現されます。

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

topPos には、div の上部と表示する要素の間のピクセル距離が含まれています。

次に、scrollTop を使用してその位置までスクロールするように div に指示します。 :

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

プロトタイプ JS では、これは次のように変換されます。

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

このアクションは、div をスクロールして、指定された要素を上部に配置するか、スクロールできない場合はできるだけ近くに配置します。頂上に到達することはできません。

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