Zenn
🛑

ChatGPT の自動スクロール” を強制停止する方法

に公開
拡張機能
Tampermonkey
ChatGPT
tech

はじめに

Webブラウザ版のChatGPTでは、新しい質問を投げるたびに、自動的に最新の投稿までスクロールされる仕様になっています。しかし私は、前の回答を読みながら新しい質問を書きたい場面が多く、この自動スクロールが煩わしく感じていました。

本記事では、Tampermonkey を使ったユーザースクリプトで「自動スクロール」をオフにする方法を、コード解説とともにご紹介します。

対応イメージ


ChatGPT → (scrollIntoView呼び出し) → ブラウザが自動スクロール
↓
ユーザースクリプトが scrollIntoView を無効化 → スクロールが抑止

事前準備：Tampermonkey のインストール

  1. Chrome／Edge
    • Chrome ウェブストアで「Tampermonkey」を検索 → 「Chrome に追加」
  2. Firefox
    • Firefox アドオンサイトで「Tampermonkey」を検索 → 「Firefox に追加」

インストールが成功すると、ブラウザの右上にTampermonkeyのアイコンが表示されます

ブラウザのデベロッパーモードを有効化（Chrome/Edge）

  1. ブラウザのアドレスバーに chrome://extensions を入力して開く
  2. 右上の デベロッパーモード トグルを ON にする
  3. Tampermonkey の詳細設定から「サイトへのアクセスを許可」（「全てのサイト」や chat.openai.com を含む）をオンにしておく

※Firefox をお使いの場合は、about:addons → Tampermonkey の歯車アイコン → 「サイトへのアクセス許可」を同様に設定すればいける…はずです（未確認）

スクリプトの作成手順

1. ダッシュボードを開く

  1. Tampermonkey アイコン→新規スクリプトを追加
  2. エディタが開くので以下コードを書き込む

2. メタデータを設定

// ==UserScript==
// @name         ChatGPT Stop Auto Scroll
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Prevent ChatGPT from forcing scroll to bottom
// @match        https://chat.openai.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==
  • @match は必ず https://chat.openai.com/* を含めて、ChatGPT のパスをカバーします。ここが間違っていると動いてくれないので注意。

3. 自動スクロール抑止ロジック

(function() {
    'use strict';

    // scrollIntoView／scrollIntoViewIfNeeded／scrollTo をすべて 何もしない処理に置き換える
    const disable = () => {
        Element.prototype.scrollIntoView = function() {};
        Element.prototype.scrollIntoViewIfNeeded = function() {};
        window.scrollTo = function() {};
    };

    // ページロード直後に一度実行
    disable();

    // 動的に読み込まれるスクリプトが上書きしてきたときのために再オーバーライド
    new MutationObserver(disable).observe(document, {
        childList: true,
        subtree: true
    });
})();
  • Element.prototype.scrollIntoView／scrollIntoViewIfNeeded：要素を表示領域に持ってくるメソッド
  • window.scrollTo：ページ全体を指定座標までスクロールするメソッド
  • 空の関数に差し替えることで、呼び出されても何も起きなくなります。

4. 保存・リロード

  1. エディタ右上のファイル→💾保存ボタンをクリック
  2. ChatGPT のタブをリロード（F5／⌘+R）
  3. Tampermonkey アイコンに「1」などのバッジが出ていれば有効化完了

うまく動かないときのチェックポイント

  • Tampermonkey が有効 👉 拡張機能管理画面で「有効」になっていて、ブラウザ右上に表示されているか
  • ブラウザのデベロッパーモードが有効 👉 chrome://extensions でONになっているか
  • @match 設定 👉 URL が正しくマッチしているか (ここがマッチしていないとTampermonkeyを有効にできない)
  • 保存＆リロード 👉 スクリプト保存後に必ずページを再読み込み
  • ブラウザ再起動 👉 キャッシュや拡張のリセットで解決する場合あり

課題・問題点

全てのスクロールイベントを無効化してしまうので、↓ボタンを押してもスクロールしなくなります。
拡張機能からトグルをオフにすればスクロールはされる様になるのですが、もう少し分けて設定できないかなーというのは今の課題です。

まとめ

Tampermonkeyとユーザースクリプトを使えば、ChatGPTの自動スクロールを手軽に無効化できます。長い回答を落ち着いて読みたいときや、表示位置を自分でコントロールしたいときに、ぜひ使ってみてください。

Discussion