Codexのチャットが飛ぶ理由|AIチャットUIでスクロール位置がずれる仕組み

生成中の作業画面として見る

CodexやChatGPTのチャットでスクロール位置が飛ぶのは、単なる操作ミスではありません。AIチャットUIは、生成中の文章、コードブロック、ツール結果、差分、ステータスを後から差し込むため、画面の高さが変わり続けます。その構造を整理します。

概要

CodexやChatGPTを使っていると、読んでいた場所が急にずれることがあります。回答の途中を追っていたはずなのに、画面が少し上や下へ動く。コードブロックが後から伸びる。ツールの実行結果が差し込まれる。さっきまで見えていた行が、別の場所へ逃げたように感じる。

これは単なる操作ミスではありません。最近のAIチャットUIは、完成した文章を一度に表示する画面ではなく、生成中の内容をリアルタイムに組み立てる画面です。文章、コード、引用、ツール結果、差分、ステータス表示が、後から少しずつ追加されます。

そのたびに画面の高さが変わり、ブラウザやアプリは表示位置を再計算します。その結果、スクロール位置が飛んだように見えます。

AIチャットは完成HTMLではない

通常の記事ページなら、本文はある程度完成した状態で表示されます。画像の読み込みや広告で多少レイアウトが動くことはありますが、基本的には読み手が追いやすい形になっています。

一方、AIチャットは違います。最初はただの文章として流れてきたものが、途中でMarkdownとして解釈されます。コードブロックになり、syntax highlightが入り、表や引用が整形され、リンクや参考情報が追加されます。

ユーザーが見ているのは、完成済みのページではありません。生成されながら形を変えるUIです。この「後から形が決まる」性質が、スクロール位置の不安定さにつながります。

後から差し込まれる要素が高さを変える

スクロール位置が飛ぶ大きな理由は、画面内の要素の高さが後から変わることです。

短いテキストだと思っていた部分がコードブロックとして再描画されると、行間や余白が変わります。ツール実行結果が挿入されると、その分だけ下の内容が押し出されます。引用やステータス表示が追加されると、読んでいた位置の上側に新しい高さが生まれます。

Codexの場合は、さらに動きが増えます。ファイル読み取り、コマンド実行、diff、テスト結果、ターミナル出力、タスク更新などが、同じ会話の中に追加されます。人間から見ると一つのチャット画面ですが、実際の体験としては、会話、作業ログ、実行結果、差分表示が同時に更新される画面です。

ストリーミング表示は安定しにくい

AIチャットでは、回答が完成する前から少しずつ表示されます。これは待ち時間を減らし、AIが動いている感覚を伝えるうえでは便利です。全文が出るまで空白で待たされるより、途中経過が見える方が安心できます。

ただし、ストリーミング表示はレイアウトを不安定にしやすい面もあります。生成途中の文章は、後から別の表示形式に変わることがあります。通常の文章だと思っていた部分がリストになったり、コードブロックになったり、表になったりします。ツール呼び出しの結果が戻ってくると、途中に新しいブロックが追加されることもあります。

画面は常に「完成前」の状態で更新されます。だから、読み手の位置も安定しにくくなります。

Codexではチャットと作業ログが混ざる

Codexのチャットが特に飛びやすく感じるのは、単なる会話ではなく、実作業の状態も表示するからです。

AIが説明するだけなら、主に文章の増加で済みます。しかしCodexは、ファイルを読み、コマンドを実行し、差分を作り、検証結果を返します。そのたびに、チャット内には新しい種類の表示が増えます。

文章だけの会話なら、下へ流れていく感覚に近いかもしれません。しかしCodexでは、途中に作業結果のかたまりが入り、表示の密度や高さが変わります。チャット画面でありながら、実際には作業ビューでもある。この二重性が、スクロール位置のずれを起こしやすくしています。

まとめ

CodexやChatGPTのチャットが飛ぶ理由は、単なるUIの不具合だけではありません。

AIチャットUIは、完成したHTMLを表示しているのではなく、生成中の文章、Markdown、コードブロック、引用、ツール結果、差分、ステータスをリアルタイムに組み立てています。その過程で、画面内の要素の高さが変わります。上側に新しい情報が差し込まれたり、既存の表示が再描画されたりします。

その結果、スクロール位置がずれます。AIチャットの画面は、読むための静的なページではなく、生成と作業が同時に進む動的な作業面です。スクロールが飛ぶ感覚は、その構造から生まれています。