☰

Custom scrolling distance of space key

Custom scrolling distance

  1. // ==UserScript==
  2. // @name         Custom scrolling distance of space key
  3. // @version      0.1.0
  4. // @description  Custom scrolling distance
  5. // @author       pana
  6. // @namespace    https://greasyfork.org/zh-CN/users/193133-pana
  7. // @license      GNU General Public License v3.0 or later
  8. // @match        *://*/*
  9. // @grant        GM_getValue
  10. // @grant        GM_setValue
  11. // @grant        GM_registerMenuCommand
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.   const store = {
  16.     distancePercentage: GM_getValue('distancePercentage', 100)
  17.   };
  18.   function configPanel() {
  19.     const panel = document.createElement('div');
  20.     panel.setAttribute('style', 'position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; background-color: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center; z-index: 100000;');
  21.     panel.innerHTML = `
  22.       <div style="position: relative; border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); background-color: rgb(21, 32, 43); border: 1px solid #000; color: #fff;">
  23.         <div style="margin: 20px 15px; text-align: center; font-size: 1.2em; font-weight: bold;">Settings</div>
  24.         <div style="margin: 0px 10px;">
  25.           <label>Scrolling distance:</label>
  26.           <input id="custom-space-scroll-input" type="number" min="1" max="100" value="${store.distancePercentage}" style="width: 50px" /> %
  27.         </div>
  28.         <div style="display: inline-block; margin: 15px 15px; text-align: right;">
  29.           <button id="custom-space-scroll-cancel-btn" style="cursor: pointer;">Cancel</button>
  30.           <button id="custom-space-scroll-ok-btn" style="cursor: pointer; margin-left: 10px;">OK</button>
  31.         </div>
  32.       </div>
  33.     `;
  34.     document.body.appendChild(panel);
  35.     panel.addEventListener('click', evt => {
  36.       if (evt.target === panel) {
  37.         panel.remove();
  38.       }
  39.     });
  40.     const okBtn = document.getElementById('custom-space-scroll-ok-btn');
  41.     const cancelBtn = document.getElementById('custom-space-scroll-cancel-btn');
  42.     cancelBtn?.addEventListener('click', e => {
  43.       e.stopPropagation();
  44.       panel.remove();
  45.     });
  46.     okBtn?.addEventListener('click', e => {
  47.       e.stopPropagation();
  48.       const input = document.querySelector('#custom-space-scroll-input');
  49.       if (input) {
  50.         const value = input.value;
  51.         let res = parseInt(value) || 100;
  52.         if (res < 1 && res > 100) {
  53.           res = 100;
  54.         }
  55.         store.distancePercentage = res;
  56.         GM_setValue('distancePercentage', res);
  57.       }
  58.       panel.remove();
  59.     });
  60.   }
  61.   function main() {
  62.     GM_registerMenuCommand('Configuration', configPanel);
  63.     window.addEventListener('keydown', evt => {
  64.       if (evt.code === 'Space' && evt.target === document.body) {
  65.         evt.preventDefault();
  66.         const shiftState = evt.shiftKey;
  67.         const curTop = document.documentElement.scrollTop || document.body.scrollTop;
  68.         const curHeight = window.innerHeight;
  69.         const base = Math.round(curHeight * store.distancePercentage / 100);
  70.         const to = shiftState ? curTop - base : curTop + base;
  71.         document.documentElement.scrollTo({
  72.           top: to,
  73.           behavior: 'smooth'
  74.         });
  75.       }
  76.     });
  77.   }
  78.   main();
  79. })();