Greasy Fork

Smooth Scrolling

Scrolls the page when a button is held `x` times per `y` seconds

目前为 2021-03-25 提交的版本。查看 最新版本

// ==UserScript==
// @name         Smooth Scrolling
// @description  Scrolls the page when a button is held `x` times per `y` seconds
// @version      1.0.0
// @namespace    https://greasyfork.org/en/users/55535-sllypper
// @author       sllypper
// @match        *://forums.spacebattles.com/*
// @match        *://forums.sufficientvelocity.com/*
// @match        *://forum.questionablequesting.com/*
// @match        *://fanfiction.net/*
// @match        *://archiveofourown.org/*
// @match        *://turb0translation.blogspot.com/*
// @grant        none
// @todo         make keybinds easily configurable
// ==/UserScript==

(function() {
    'use strict';

    // Smooth Scrolling Settings

    // how much it scrolls every time (in pixels)
    let scrollAmount = 16;

    // how long between ticks (in ms)
    // 16.66667 = 60 frames per second
    // not used if experimental is true
    let scrollPeriod = 16.66667;

    // how much holding Shift will multiply the scrollAmount
    let shiftSpeedMod = 2.0;

    //

    // Experimental settings

    // Use the alternative experimental Scroller
    // it's bound to your screen framerate
    // is supposed to be smoother
    let experimental = true;

    // Scroll Speed in times per second
    // set to 0 to match your refresh rate (smooth perfection)
    // values above your framerate scrolls every frame
    let fps = 0

    // programming magic stuff

    const states = {
        NONE: 0,
        UP: 1,
        SHIFTUP: 2,
        DOWN: 3,
        SHIFTDOWN: 4
    }
    let scrollState = states.NONE;
    let currScrollAction = null;
    let isTyping = false;

    document.addEventListener('focus', function(evt) {
        var target = evt.target;
        if((target.nodeName === 'INPUT' && target.type === 'text') || target.nodeName === 'TEXTAREA') isTyping = true;
        // else isTyping = false;
      }, true);

    document.addEventListener('blur', function(evt) {
        var target = evt.target;
        if((target.nodeName === 'INPUT' && target.type === 'text') || target.nodeName === 'TEXTAREA') isTyping = false;
    }, true);

    document.addEventListener("keydown", event => {
        // ignore keybindings when text input is focused
        if(isTyping || event.isComposing) {
            event.stopPropagation();
            return;
        }
        if (event.code === "KeyW" || event.code === "KeyK" || event.code === "ArrowUp") {
            if (scrollState !== states.UP && !event.shiftKey) {
                clearScrollAction();
                scrollState = states.UP;
                scrollAction(-scrollAmount);
            } else if (scrollState !== states.SHIFTUP && event.shiftKey) {
                clearScrollAction();
                scrollState = states.SHIFTUP;
                scrollAction(-scrollAmount*shiftSpeedMod);
            }
        } else if (event.code === "KeyS" || event.code === "KeyJ" || event.code === "ArrowDown") {
            if (scrollState !== states.DOWN && !event.shiftKey) {
                clearScrollAction();
                scrollState = states.DOWN;
                scrollAction(scrollAmount);
            } else if (scrollState !== states.SHIFTDOWN && event.shiftKey) {
                clearScrollAction();
                scrollState = states.SHIFTDOWN;
                scrollAction(scrollAmount*shiftSpeedMod);
            }
        }
    });

    document.addEventListener("keyup", event => {
        switch(event.code) {
            case 'KeyW':
            case 'KeyK':
            case 'KeyJ':
            case 'KeyS':
            case 'ArrowDown':
            case 'ArrowUp':
                clearScrollAction();
                break
            default:
                if (event.key === "Shift") {
                    clearScrollAction();
                }
                break;
        }
    });

    function scrollAction(amount) {
        if (experimental) {
            scroller.move(amount)
            return;
        }

        currScrollAction = setInterval(() => {
            window.scrollBy(0, amount);
        }, scrollPeriod)
    }

    function clearScrollAction() {
        clearInterval(currScrollAction);
        currScrollAction = null;
        scrollState = states.NONE;
        scroller.stop();
    }

    // experimental bit

    let scroller = new Scroller(fps)

    function Scroller(fps) {

        var	delay,
            time,
            frame,
            tref,
            amount;

        function loop(timestamp) {
            if (fps !== 0) {
                // Scroll with fps behavior
                if (time === null) {time = timestamp; timestamp = 0}
                var seg = Math.floor((timestamp - time) / delay);
                if (seg > frame) {
                    frame = seg;
                    window.scrollBy(0, amount);
                }
            } else {
                // Scroll every frame behavior
                window.scrollBy(0, amount);
            }
            tref = requestAnimationFrame(loop)
        }

        this.move = function(pixels) {
            amount = pixels;
            delay = 1000 / fps;
            frame = -1;
            time = null;
            tref = requestAnimationFrame(loop);
        }

        this.stop = function() {
            cancelAnimationFrame(tref);
        };
    }

})();