☰

Scroll in E-ink browsing

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

  1. // ==UserScript==
  2. // @name         Scroll in E-ink browsing
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Inspired by Einkbro, imitate to optimize the page turning experience in a browser with js.
  6. // @match        *://*/*
  7. // @grant        GM_registerMenuCommand
  8. // @grant        GM_setValue
  9. // @grant        GM_getValue
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Default values
  17.     let squareSize = GM_getValue('squareSize', 120);
  18.     let scrollAmount = GM_getValue('scrollAmount', 800);
  19.     let position = GM_getValue('position', 4);
  20.  
  21.     GM_registerMenuCommand('Set Scroll Settings', () => {
  22.     const newSquareSize = prompt('Enter control size (px):', squareSize);
  23.     if (newSquareSize !== null) {
  24.         squareSize = parseInt(newSquareSize);
  25.         GM_setValue('squareSize', squareSize);
  26.     }
  27.  
  28.     const newScrollAmount = prompt('Enter scroll amount (px):', scrollAmount);
  29.     if (newScrollAmount !== null) {
  30.         scrollAmount = parseInt(newScrollAmount);
  31.         GM_setValue('scrollAmount', scrollAmount);
  32.     }
  33.  
  34.     const newPosition = prompt('Enter control position (1-4) for TopLeft,TopRight,BottomLeft,BottomRight:', position);
  35.     if (newPosition !== null) {
  36.         position = parseInt(newPosition);
  37.         GM_setValue('position', position);
  38.     }
  39. });
  40.  
  41.  
  42.     // Create control elements
  43.     const upControl = document.createElement('div');
  44.     const downControl = document.createElement('div');
  45.  
  46.     // Style control elements
  47.     upControl.style.width = `${squareSize}px`;
  48.     upControl.style.height = `${squareSize}px`;
  49.     upControl.style.borderTop = '2px dashed black';
  50.     upControl.style.borderLeft = '2px dashed black';
  51.     upControl.style.borderRight = '2px dashed black';
  52.  
  53.     upControl.style.opacity = '0.5';
  54.     upControl.style.position = 'fixed';
  55.     upControl.style.zIndex = '9999';
  56.     upControl.style.cursor = 'pointer';
  57.  
  58.     downControl.style.width = `${squareSize}px`;
  59.     downControl.style.height = `${squareSize}px`;
  60.     downControl.style.border = '2px dashed black';
  61.     downControl.style.opacity = '0.5';
  62.     downControl.style.position = 'fixed';
  63.     downControl.style.zIndex = '9999';
  64.     downControl.style.cursor = 'pointer';
  65.  
  66.     // Set position of control elements
  67.     switch (position) {
  68.         case 1:
  69.             upControl.style.top = '10px';
  70.             upControl.style.left = '10px';
  71.             downControl.style.top = `${squareSize + 10}px`;
  72.             downControl.style.left = '10px';
  73.             break;
  74.         case 2:
  75.             upControl.style.bottom = `${squareSize + 10}px`;
  76.             upControl.style.left = '10px';
  77.             downControl.style.bottom = '10px';
  78.             downControl.style.left = '10px';
  79.             break;
  80.         case 3:
  81.             upControl.style.top = '10px';
  82.             upControl.style.right = '10px';
  83.             downControl.style.top = `${squareSize + 10}px`;
  84.             downControl.style.right = '10px';
  85.             break;
  86.         case 4:
  87.             upControl.style.bottom = `${squareSize + 10}px`;
  88.             upControl.style.right = '10px';
  89.             downControl.style.bottom = '10px';
  90.             downControl.style.right = '10px';
  91.             break;
  92.         default:
  93.             break;
  94.     }
  95.  
  96.     // Add click event listeners
  97.     upControl.addEventListener('click', () => {
  98.         window.scrollBy(0, -scrollAmount);
  99.     });
  100.  
  101.     downControl.addEventListener('click', () => {
  102.         window.scrollBy(0, scrollAmount);
  103.     });
  104.  
  105.     // Add long press event listeners
  106.     let pressTimer;
  107.  
  108.     upControl.addEventListener('mousedown', () => {
  109.         pressTimer = window.setTimeout(() => {
  110.             window.scrollTo(0, 0);
  111.         }, 1500);
  112.         return false;
  113.     });
  114.  
  115.     upControl.addEventListener('mouseup', () => {
  116.         clearTimeout(pressTimer);
  117.         return false;
  118.     });
  119.  
  120.     downControl.addEventListener('mousedown', () => {
  121.         pressTimer = window.setTimeout(() => {
  122.             window.scrollTo(0, document.body.scrollHeight);
  123.         }, 1500);
  124.         return false;
  125.     });
  126.  
  127.     downControl.addEventListener('mouseup', () => {
  128.         clearTimeout(pressTimer);
  129.         return false;
  130.     });
  131.  
  132.     // Append control elements to body
  133.     document.body.appendChild(upControl);
  134.     document.body.appendChild(downControl);
  135.  
  136. })();