スクロールがあり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 がスクロールされます (または、それが不可能な場合は、表示されるまでできるだけ下にスクロールされます)。