Inspired by Einkbro, imitate to optimize the page turning experience in a browser with js.
// ==UserScript==
// @name Scroll in E-ink browsing
// @namespace http://tampermonkey.net/
// @version 1.0
// @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);
GM_registerMenuCommand('Set Scroll Settings', () => {
const newSquareSize = prompt('Enter control size (px):', squareSize);
if (newSquareSize !== null) {
squareSize = parseInt(newSquareSize);
GM_setValue('squareSize', squareSize);
}
const newScrollAmount = prompt('Enter scroll amount (px):', scrollAmount);
if (newScrollAmount !== null) {
scrollAmount = parseInt(newScrollAmount);
GM_setValue('scrollAmount', scrollAmount);
}
const newPosition = prompt('Enter control position (1-4) for TopLeft,TopRight,BottomLeft,BottomRight:', position);
if (newPosition !== null) {
position = parseInt(newPosition);
GM_setValue('position', position);
}
});
// 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.borderTop = '2px dashed black';
upControl.style.borderLeft = '2px dashed black';
upControl.style.borderRight = '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 = `${squareSize + 10}px`;
downControl.style.left = '10px';
break;
case 2:
upControl.style.bottom = `${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 = `${squareSize + 10}px`;
downControl.style.right = '10px';
break;
case 4:
upControl.style.bottom = `${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);
})();