1. ホーム
  2. ジャバスクリプト

[解決済み】div内の要素にスクロールする方法は?

2022-04-02 10:16:27

質問

私は、スクロールされた div をクリックすると、強制的にこのようなイベントが発生するようにしたいのです。 div をクリックすると、スクロールして中の要素を見ることができます。 そのJavasScriptをこんな風に書いてみた。

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

をスクロールさせながら、全ページをスクロールさせることができます。 div そのものです。 それをどう解決するか?

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

解決するには?

スクロールして表示させたい要素の、親要素 (スクロールする 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 をスクロールさせます。