☰

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.2
// @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 settings
    let scrollUpAmount = GM_getValue('scrollUpAmount', 1200);
    let scrollDownAmount = GM_getValue('scrollDownAmount', 1000);
    let boxSize = GM_getValue('boxSize', 50);
    let boxPosition = GM_getValue('boxPosition', 'bottomRight');

    // Create the boxes
    let boxUp = document.createElement('div');
    let boxDown = document.createElement('div');

    // Style the boxes
    boxUp.style.width = boxSize + 'px';
    boxUp.style.height = boxSize + 'px';
    boxUp.style.border = '2px dashed #000';
    boxUp.style.position = 'fixed';
    boxUp.style.zIndex = '9999';
    boxUp.style.cursor = 'pointer';

    boxDown.style.width = boxSize + 'px';
    boxDown.style.height = boxSize + 'px';
    boxDown.style.border = '2px dashed #000';
    boxDown.style.position = 'fixed';
    boxDown.style.zIndex = '9999';
    boxDown.style.cursor = 'pointer';

    // Set the position of the boxes based on the setting
    switch (boxPosition) {
        case 'bottomRight':
            boxUp.style.bottom = (boxSize + 10) + 'px';
            boxUp.style.right = '20px';

            boxDown.style.bottom = '10px';
            boxDown.style.right = '20px';
            break;
        case 'bottomLeft':
            boxUp.style.bottom = (boxSize + 10) + 'px';
            boxUp.style.left = '20px';

            boxDown.style.bottom = '10px';
            boxDown.style.left = '20px';
            break;
        case 'topLeft':
            boxUp.style.top = (boxSize + 10) + 'px';
            boxUp.style.left = '20px';

            boxDown.style.top = '10px';
            boxDown.style.left = '20px';
            break;
        case 'topRight':
            boxUp.style.top = (boxSize + 10) + 'px';
            boxUp.style.right = '20px';

            boxDown.style.top = '10px';
            boxDown.style.right = '20px';
            break;
        default:
            break;
    }

    // Add the boxes to the page
    document.body.appendChild(boxUp);
    document.body.appendChild(boxDown);

    // Add click event listeners to the boxes
    let longPressTimer;

    function handleLongPress() {
        window.scrollTo(0, 0);
        clearTimeout(longPressTimer);
        longPressTimer = null;
    }

    function handleLongPress2() {
        window.scrollTo(0, document.body.scrollHeight);
        clearTimeout(longPressTimer);
        longPressTimer = null;
    }

    function handleShortPress() {
        window.scrollBy(0, -scrollUpAmount);
        clearTimeout(longPressTimer);
        longPressTimer = null;
    }

    function handleShortPress2() {
        window.scrollBy(0, scrollDownAmount);
        clearTimeout(longPressTimer);
        longPressTimer = null;
    }

    function handleMouseDown(event) {
        if (event.button === 0) {
            longPressTimer = setTimeout(handleLongPress, 1500);
        }
    }

    function handleMouseDown2(event) {
        if (event.button === 0) {
            longPressTimer = setTimeout(handleLongPress2, 1500);
        }
    }

    function handleMouseUp(event) {
        if (event.button === 0 && longPressTimer !== null) {
            handleShortPress();
        }
    }
})();