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 0.31
// @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');
// Register menu commands to allow the user to change the settings
GM_registerMenuCommand('Set Scroll Up Amount', function() {
let newScrollUpAmount = prompt('Enter the new scroll up amount in pixels:', scrollUpAmount);
if (newScrollUpAmount !== null) {
scrollUpAmount = parseInt(newScrollUpAmount);
GM_setValue('scrollUpAmount', scrollUpAmount);
}
});
GM_registerMenuCommand('Set Scroll Down Amount', function() {
let newScrollDownAmount = prompt('Enter the new scroll down amount in pixels:', scrollDownAmount);
if (newScrollDownAmount !== null) {
scrollDownAmount = parseInt(newScrollDownAmount);
GM_setValue('scrollDownAmount', scrollDownAmount);
}
});
GM_registerMenuCommand('Set Box Size', function() {
let newBoxSize = prompt('Enter the new box size in pixels:', boxSize);
if (newBoxSize !== null) {
boxSize = parseInt(newBoxSize);
GM_setValue('boxSize', boxSize);
// Update the size of the boxes on the page
boxUp.style.width = boxSize + 'px';
boxUp.style.height = boxSize + 'px';
boxDown.style.width = boxSize + 'px';
boxDown.style.height = boxSize + 'px';
}
});
GM_registerMenuCommand('Set Box Position', function() {
let newBoxPosition = prompt('Enter the new box position (bottomRight, bottomLeft, topLeft, topRight):', boxPosition);
if (newBoxPosition !== null) {
boxPosition = newBoxPosition;
GM_setValue('boxPosition', boxPosition);
// Update the position of the boxes on the page
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;
}
}
});
// 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();
}
}
// Add event listeners to the boxes
boxUp.addEventListener('mousedown', handleMouseDown);
boxUp.addEventListener('mouseup', handleMouseUp);
boxDown.addEventListener('mousedown', handleMouseDown2);
boxDown.addEventListener('mouseup', handleShortPress2);
})();