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

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

Web 開発では、ページ上の要素内でのスクロールはユーザー エクスペリエンスにとって非常に重要です。開発者が直面する一般的な問題の 1 つは、スクロールされた div 内の要素までスクロールすることです。

問題:

ユーザーは、スクロールされた div 内の要素をクリックして自動的に表示したいと考えています。スクロールして表示します。ただし、次の JavaScript メソッドを使用すると、

document.getElementById(chr).scrollIntoView(true);

div 自体を含むページ全体がスクロールされます。この動作は望ましくありません。

解決策:

div のみをスクロールしてターゲット要素を表示するには、その要素を基準とした要素の上部オフセットを計算する必要があります。親 (スクロールされた div コンテナ)。

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

変数 topPos には、スクロールする div の上部とターゲット要素の間の距離が含まれます。

div をその位置までスクロールするには、 usescrollTop:

document.getElementById('scrolling_div').scrollTop = topPos;

プロトタイプ フレームワーク:

プロトタイプ JS フレームワークを使用する場合は、次のコードを使用できます:

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

このメソッドは、ターゲット要素が正確に一番上に来るように div をスクロールするか、div 内に表示されるようにできるだけ下にスクロールします。

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