HotKeyTopBottomScroll

use alt+up/down to scroll to top/bottom
Stel een vraag, plaats een beoordeling of rapporteer dit script.
Regels afbreken
// ==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 });
})();