☰

Scroll in E-ink browsing

Inspired by Einkbro, imitate to optimize the page turning experience in a browser with js.

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

// ==UserScript==
// @name         Scroll in E-ink browsing
// @namespace    http://tampermonkey.net/
// @version      0.41
// @description  Inspired by Einkbro, imitate to optimize the page turning experience in a browser with js.
// @match        *://*/*
// @grant        GM_registerMenuCommand
// @grant        GM_setValue
// @grant        GM_getValue
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Default values
    let squareSize = GM_getValue('squareSize', 120);
    let scrollAmount = GM_getValue('scrollAmount', 800);
    let position = GM_getValue('position', 4);

    // Create control elements
    const upControl = document.createElement('div');
    const downControl = document.createElement('div');

    // Style control elements
    upControl.style.width = `${squareSize}px`;
    upControl.style.height = `${squareSize}px`;
    upControl.style.border = '2px dashed black';
    upControl.style.opacity = '0.5';
    upControl.style.position = 'fixed';
    upControl.style.zIndex = '9999';
    upControl.style.cursor = 'pointer';

    downControl.style.width = `${squareSize}px`;
    downControl.style.height = `${squareSize}px`;
    downControl.style.border = '2px dashed black';
    downControl.style.opacity = '0.5';
    downControl.style.position = 'fixed';
    downControl.style.zIndex = '9999';
    downControl.style.cursor = 'pointer';

    // Set position of control elements
    switch (position) {
        case 1:
            upControl.style.top = '10px';
            upControl.style.left = '10px';
            downControl.style.top = `${10 + squareSize + 10}px`;
            downControl.style.left = '10px';
            break;
        case 2:
            upControl.style.bottom = `${10 + squareSize + 10}px`;
            upControl.style.left = '10px';
            downControl.style.bottom = '10px';
            downControl.style.left = '10px';
            break;
        case 3:
            upControl.style.top = '10px';
            upControl.style.right = '10px';
            downControl.style.top = `${10 + squareSize + 10}px`;
            downControl.style.right = '10px';
            break;
        case 4:
            upControl.style.bottom = `${10 + squareSize + 10}px`;
            upControl.style.right = '10px';
            downControl.style.bottom = '10px';
            downControl.style.right = '10px';
            break;
        default:
            break;
    }

    // Add click event listeners
    upControl.addEventListener('click', () => {
        window.scrollBy(0, -scrollAmount);
    });

    downControl.addEventListener('click', () => {
        window.scrollBy(0, scrollAmount);
    });

    // Add long press event listeners
    let pressTimer;

    upControl.addEventListener('mousedown', () => {
        pressTimer = window.setTimeout(() => {
            window.scrollTo(0, 0);
        }, 1500);
        return false;
    });

    upControl.addEventListener('mouseup', () => {
        clearTimeout(pressTimer);
        return false;
    });

    downControl.addEventListener('mousedown', () => {
        pressTimer = window.setTimeout(() => {
            window.scrollTo(0, document.body.scrollHeight);
        }, 1500);
        return false;
    });

    downControl.addEventListener('mouseup', () => {
        clearTimeout(pressTimer);
        return false;
    });

    // Append control elements to body
    document.body.appendChild(upControl);
    document.body.appendChild(downControl);

});