Greasy Fork

Greasy Fork is available in English.

HotKeyTopBottomScroll

use alt+up/down to scroll to top/bottom

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         HotKeyTopBottomScroll
// @namespace    http://tampermonkey.net/
// @version      1.2.0
// @description  use alt+up/down to scroll to top/bottom
// @author       Kiddo
// @match        *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    const EDGE_BY_KEY = {
        ArrowUp: 'top',
        ArrowDown: 'bottom'
    };

    const SCROLLABLE_OVERFLOW = new Set(['auto', 'scroll', 'overlay']);

    function isHtmlElement(node) {
        return node instanceof HTMLElement;
    }

    function getMaxScrollTop(element) {
        return Math.max(0, element.scrollHeight - element.clientHeight);
    }

    function isScrollable(element) {
        if (!isHtmlElement(element)) {
            return false;
        }

        if (getMaxScrollTop(element) <= 1) {
            return false;
        }

        if (
            element === document.scrollingElement ||
            element === document.documentElement ||
            element === document.body
        ) {
            return true;
        }

        const style = window.getComputedStyle(element);
        const overflowY = style.overflowY === 'visible' ? style.overflow : style.overflowY;
        return SCROLLABLE_OVERFLOW.has(overflowY);
    }

    function canScrollToEdge(element, edge) {
        const maxScrollTop = getMaxScrollTop(element);

        if (maxScrollTop <= 1) {
            return false;
        }

        if (edge === 'top') {
            return element.scrollTop > 0;
        }

        return element.scrollTop < maxScrollTop - 1;
    }

    function collectAncestorCandidates(startNode, pushCandidate) {
        let current = startNode;

        while (current) {
            if (isHtmlElement(current)) {
                pushCandidate(current);
            }

            const root = typeof current.getRootNode === 'function' ? current.getRootNode() : null;
            current = current.parentElement || (root instanceof ShadowRoot ? root.host : null);
        }
    }

    function buildCandidateList(event) {
        const candidates = [];
        const seen = new Set();

        function pushCandidate(element) {
            if (!isHtmlElement(element) || seen.has(element)) {
                return;
            }

            seen.add(element);
            candidates.push(element);
        }

        if (typeof event.composedPath === 'function') {
            for (const item of event.composedPath()) {
                pushCandidate(item);
            }
        }

        collectAncestorCandidates(document.activeElement, pushCandidate);

        const centerX = Math.max(1, Math.floor(window.innerWidth / 2));
        const centerY = Math.max(1, Math.floor(window.innerHeight / 2));

        for (const element of document.elementsFromPoint(centerX, centerY)) {
            collectAncestorCandidates(element, pushCandidate);
        }

        pushCandidate(document.scrollingElement);
        pushCandidate(document.documentElement);
        pushCandidate(document.body);

        return candidates;
    }

    function getRootScrollTarget() {
        return document.scrollingElement || document.documentElement || document.body || null;
    }

    function findNestedScrollTarget(event, edge) {
        const rootTarget = getRootScrollTarget();

        for (const candidate of buildCandidateList(event)) {
            if (
                !isScrollable(candidate) ||
                candidate === rootTarget ||
                candidate === document.documentElement ||
                candidate === document.body
            ) {
                continue;
            }

            if (canScrollToEdge(candidate, edge)) {
                return candidate;
            }
        }

        return null;
    }

    function getRootScrollState(edge) {
        const rootTarget = getRootScrollTarget();
        const scrollTop = rootTarget ? rootTarget.scrollTop : window.scrollY;
        const maxScrollTop = rootTarget ? getMaxScrollTop(rootTarget) : 0;
        const atRequestedEdge = edge === 'top'
            ? scrollTop <= 1
            : scrollTop >= maxScrollTop - 1;

        return {
            rootTarget,
            scrollTop,
            maxScrollTop,
            atRequestedEdge,
            isScrollable: isScrollable(rootTarget)
        };
    }

    function scrollRootToEdge(edge) {
        window.scrollTo({
            top: edge === 'top' ? 0 : Number.MAX_SAFE_INTEGER,
            behavior: 'auto'
        });
    }

    function scrollToEdge(target, edge) {
        const top = edge === 'top' ? 0 : getMaxScrollTop(target);

        if (
            target === document.scrollingElement ||
            target === document.documentElement ||
            target === document.body
        ) {
            window.scrollTo({ top, behavior: 'auto' });
            return;
        }

        if (typeof target.scrollTo === 'function') {
            target.scrollTo({ top, behavior: 'auto' });
            return;
        }

        target.scrollTop = top;
    }

    window.addEventListener('keydown', function(event) {
        if (!event.altKey || event.ctrlKey || event.shiftKey || event.metaKey) {
            return;
        }

        const edge = EDGE_BY_KEY[event.key];
        if (!edge) {
            return;
        }

        event.preventDefault();

        const before = getRootScrollState(edge);
        scrollRootToEdge(edge);
        const after = getRootScrollState(edge);

        const rootMoved = Math.abs(after.scrollTop - before.scrollTop) > 1;
        const shouldFallbackToContainer =
            !before.isScrollable || (!rootMoved && !before.atRequestedEdge);

        if (!shouldFallbackToContainer) {
            return;
        }

        const target = findNestedScrollTarget(event, edge);
        if (!target) {
            return;
        }

        scrollToEdge(target, edge);
        event.stopImmediatePropagation();
    }, { capture: true, passive: false });
})();