Fix PageUp and PageDown scrolling for ChatGPT

Redirects PageUp and PageDown keys to scroll the conversation window while typing in the input field.

目前為 2024-12-01 提交的版本，檢視最新版本。

安裝腳本 ?

Wrap lines

// ==UserScript==
// @name         Fix PageUp and PageDown scrolling for ChatGPT
// @description  Redirects PageUp and PageDown keys to scroll the conversation window while typing in the input field.
// @author       NWP/DEVULSKY
// @namespace    https://gf.qytechs.cn/users/877912
// @version      0.8
// @license      MIT
// @match        https://chat.openai.com/*
// @match        https://chatgpt.com/*
// @grant        none
//
// ==/UserScript==

(function () {
  'use strict';

  /**
   * Finds the scrollable container of the conversation window.
   * Falls back to a dynamic class-based selector if a specific container ID is not found.
   * @returns {HTMLElement|null} The scrollable container element, or null if not found.
   */
  const getScrollableContainer = () =>
    document.querySelector('#conversation-inner-div') ||
    Array.from(document.querySelectorAll('div')).find(div => /^react-scroll-to-bottom--css-\S+$/.test(div.className));

  /**
   * Handles the PageUp and PageDown key events.
   * Prevents the default browser behavior and scrolls the conversation window instead.
   * @param {KeyboardEvent} event - The keydown event triggered by the user.
   */
  const handlePageKeys = (event) => {
    if (!['PageUp', 'PageDown'].includes(event.key)) return; // Only process PageUp and PageDown keys

    const scrollableContainer = getScrollableContainer();
    if (!scrollableContainer) return; // Exit if no scrollable container is found

    event.preventDefault(); // Prevent default browser scrolling behavior
    const scrollFactor = event.key === 'PageUp' ? -0.75 : 0.75; // Scroll up or down by 75% of the container height
    scrollableContainer.scrollBy({ top: scrollableContainer.clientHeight * scrollFactor, behavior: 'instant' });
  };

  // Attach the keydown event listener to the document
  document.addEventListener('keydown', handlePageKeys);
})();

欢迎访问Greasy Fork镜像