JavaScript はビューポート内でのみ IntoView をスクロールします

Question

モックアップを作成しました (ビデオの再生中にテキストの新しい行にスクロールするため、スペースが使用されることに注意してください)。ブロック「nearest」でscrollIntoViewを使用しています。

問題は、ページ全体にスクロールがあるため、依然としてページがスクロールされてしまうことです。行 div 内のアクティブなテキスト行までスクロールしたいだけです (ビュー内にある必要はありません)。 「ビデオ」div を見ていると、下にスクロールし続けるためです (これは望ましくない動作です)。

リーリー リーリー リーリー

Answer 1

お気づきのとおり、scrollIntoView() はここでやろうとしていることには適していません。要素を表示するために複数のビュー ペインを積極的にスクロールします。

より適切なものは、親要素 (この場合は .lines) の element.scrollTo(..) です。要素をビューポートの中央に配置するには、高度な演算を行う必要がありますが、比較的簡単です。

リーリー リーリー リーリー