Scroll in E-ink browsing

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

当前为 2023-07-24 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Scroll in E-ink browsing
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.41
  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. // Create control elements
  22. const upControl = document.createElement('div');
  23. const downControl = document.createElement('div');
  24.  
  25. // Style control elements
  26. upControl.style.width = `${squareSize}px`;
  27. upControl.style.height = `${squareSize}px`;
  28. upControl.style.border = '2px dashed black';
  29. upControl.style.opacity = '0.5';
  30. upControl.style.position = 'fixed';
  31. upControl.style.zIndex = '9999';
  32. upControl.style.cursor = 'pointer';
  33.  
  34. downControl.style.width = `${squareSize}px`;
  35. downControl.style.height = `${squareSize}px`;
  36. downControl.style.border = '2px dashed black';
  37. downControl.style.opacity = '0.5';
  38. downControl.style.position = 'fixed';
  39. downControl.style.zIndex = '9999';
  40. downControl.style.cursor = 'pointer';
  41.  
  42. // Set position of control elements
  43. switch (position) {
  44. case 1:
  45. upControl.style.top = '10px';
  46. upControl.style.left = '10px';
  47. downControl.style.top = `${10 + squareSize + 10}px`;
  48. downControl.style.left = '10px';
  49. break;
  50. case 2:
  51. upControl.style.bottom = `${10 + squareSize + 10}px`;
  52. upControl.style.left = '10px';
  53. downControl.style.bottom = '10px';
  54. downControl.style.left = '10px';
  55. break;
  56. case 3:
  57. upControl.style.top = '10px';
  58. upControl.style.right = '10px';
  59. downControl.style.top = `${10 + squareSize + 10}px`;
  60. downControl.style.right = '10px';
  61. break;
  62. case 4:
  63. upControl.style.bottom = `${10 + squareSize + 10}px`;
  64. upControl.style.right = '10px';
  65. downControl.style.bottom = '10px';
  66. downControl.style.right = '10px';
  67. break;
  68. default:
  69. break;
  70. }
  71.  
  72. // Add click event listeners
  73. upControl.addEventListener('click', () => {
  74. window.scrollBy(0, -scrollAmount);
  75. });
  76.  
  77. downControl.addEventListener('click', () => {
  78. window.scrollBy(0, scrollAmount);
  79. });
  80.  
  81. // Add long press event listeners
  82. let pressTimer;
  83.  
  84. upControl.addEventListener('mousedown', () => {
  85. pressTimer = window.setTimeout(() => {
  86. window.scrollTo(0, 0);
  87. }, 1500);
  88. return false;
  89. });
  90.  
  91. upControl.addEventListener('mouseup', () => {
  92. clearTimeout(pressTimer);
  93. return false;
  94. });
  95.  
  96. downControl.addEventListener('mousedown', () => {
  97. pressTimer = window.setTimeout(() => {
  98. window.scrollTo(0, document.body.scrollHeight);
  99. }, 1500);
  100. return false;
  101. });
  102.  
  103. downControl.addEventListener('mouseup', () => {
  104. clearTimeout(pressTimer);
  105. return false;
  106. });
  107.  
  108. // Append control elements to body
  109. document.body.appendChild(upControl);
  110. document.body.appendChild(downControl);
  111.  
  112. });