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

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

Susan Sarandon

リリース： 2024-10-26 15:41:30

オリジナル

957 人が閲覧しました

How to Prevent Scrolling the Entire Page When Clicking an Element Inside a Scrollable Div?

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

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

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

ログイン後にコピー

<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 サイトの他の関連記事を参照してください。