☰

PageUp/PageDown buttons

Add semi-transparent PageUp/PageDown buttons to the right of every page. Useful when reading web pages on e-ink screens.

目前為 2023-02-22 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         PageUp/PageDown buttons
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add semi-transparent PageUp/PageDown buttons to the right of every page. Useful when reading web pages on e-ink screens.
// @author       xiaq
// @match        *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant        none
// @license      BSD 2-clause
// ==/UserScript==

(function() {
    'use strict';

    const container = document.createElement('div');
    setStyle(container, {
        position: 'fixed', right: '8px', top: 'calc(50% - 48px)',
        display: 'flex', 'flex-direction': 'column',
        opacity: '0.5',
    })

    const buttonStyle = {
        width: '48px', height: '48px', 'font-size': '32px', border: '1px solid black',
        display: 'flex', 'align-items': 'center', 'justify-content': 'center',
    };
    const scrollFactor = 0.8;

    const pageUp = document.createElement('button');
    pageUp.innerText = '▲';
    setStyle(pageUp, buttonStyle);
    pageUp.onclick = () => { window.scrollBy(0, -scrollFactor * window.innerHeight) };

    const pageDown = document.createElement('button');
    pageDown.innerText = '▼';
    setStyle(pageDown, buttonStyle);
    pageDown.onclick = () => { window.scrollBy(0, scrollFactor * window.innerHeight) };

    container.appendChild(pageUp);
    container.appendChild(pageDown);
    document.body.appendChild(container);

    function setStyle(elem, obj) {
        elem.style = Object.entries(obj).map(([k, v]) => k+':'+v).join(';');
    }
})();