スクロール可能な Div 内の要素をクリックしたときにページ全体がスクロールしないようにするにはどうすればよいですか?

スクロール可能な Div 内をスクロールする方法

スクロールされた Div 内の要素をクリックすると、ページ全体が表示されなくなる問題が発生する場合があります。 div だけではなくスクロールします。これを解決するには、次の手順を利用します。

1. 親 div を基準とした目的の要素の垂直オフセットを計算します。

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

2. scrollTop を利用して、 div を指定された位置までスクロールします:

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

または、プロトタイプの JS 実装の場合:

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

このアプローチにより、div がスクロールして目的の要素が表示されます。一番上、またはデフォルトで表示されない場合はできるだけ下に移動します。

以上がスクロール可能な Div 内の要素をクリックしたときにページ全体がスクロールしないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。