div 内の要素までスクロールするにはどうすればいいですか? 質問する

div 内の要素までスクロールするにはどうすればいいですか? 質問する

スクロールがありdiv、それをクリックするとイベントが発生し、div内部の要素を表示するために強制的にスクロールします。次のように JavasSript を書きました。

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

しかし、これはページ自体をスクロールしながらページ全体をスクロールしますdiv。これを修正するにはどうすればいいでしょうか?

私はこう言いたいのです:MyContainerDiv.getElementById(chr).scrollIntoView(true);

ベストアンサー1

スクロールして表示する要素の上部オフセットを、その親 (スクロールする div コンテナー) を基準として取得する必要があります。

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

変数 topPos は、スクロール div の上部と表示したい要素の間の距離 (ピクセル単位) に設定されます。

ここで、div にその位置までスクロールするように指示しますscrollTop

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

プロトタイプ JS フレームワークを使用している場合は、次のように同じことを行います。

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

繰り返しますが、これにより、表示したい要素が正確に一番上になるように div がスクロールされます (または、それが不可能な場合は、表示されるまでできるだけ下にスクロールされます)。

おすすめ記事