Custom scrolling distance of space key

Custom scrolling distance
换行
// ==UserScript==
// @name         Custom scrolling distance of space key
// @version      0.1.0
// @description  Custom scrolling distance
// @author       pana
// @namespace    https://gf.qytechs.cn/zh-CN/users/193133-pana
// @license      GNU General Public License v3.0 or later
// @match        *://*/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function () {
  const store = {
    distancePercentage: GM_getValue('distancePercentage', 100)
  };
  function configPanel() {
    const panel = document.createElement('div');
    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;');
    panel.innerHTML = `
      <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;">
        <div style="margin: 20px 15px; text-align: center; font-size: 1.2em; font-weight: bold;">Settings</div>
        <div style="margin: 0px 10px;">
          <label>Scrolling distance:</label>
          <input id="custom-space-scroll-input" type="number" min="1" max="100" value="${store.distancePercentage}" style="width: 50px" /> %
        </div>
        <div style="display: inline-block; margin: 15px 15px; text-align: right;">
          <button id="custom-space-scroll-cancel-btn" style="cursor: pointer;">Cancel</button>
          <button id="custom-space-scroll-ok-btn" style="cursor: pointer; margin-left: 10px;">OK</button>
        </div>
      </div>
    `;
    document.body.appendChild(panel);
    panel.addEventListener('click', evt => {
      if (evt.target === panel) {
        panel.remove();
      }
    });
    const okBtn = document.getElementById('custom-space-scroll-ok-btn');
    const cancelBtn = document.getElementById('custom-space-scroll-cancel-btn');
    cancelBtn?.addEventListener('click', e => {
      e.stopPropagation();
      panel.remove();
    });
    okBtn?.addEventListener('click', e => {
      e.stopPropagation();
      const input = document.querySelector('#custom-space-scroll-input');
      if (input) {
        const value = input.value;
        let res = parseInt(value) || 100;
        if (res < 1 && res > 100) {
          res = 100;
        }
        store.distancePercentage = res;
        GM_setValue('distancePercentage', res);
      }
      panel.remove();
    });
  }
  function main() {
    GM_registerMenuCommand('Configuration', configPanel);
    window.addEventListener('keydown', evt => {
      if (evt.code === 'Space' && evt.target === document.body) {
        evt.preventDefault();
        const shiftState = evt.shiftKey;
        const curTop = document.documentElement.scrollTop || document.body.scrollTop;
        const curHeight = window.innerHeight;
        const base = Math.round(curHeight * store.distancePercentage / 100);
        const to = shiftState ? curTop - base : curTop + base;
        document.documentElement.scrollTo({
          top: to,
          behavior: 'smooth'
        });
      }
    });
  }
  main();
})();
欢迎访问Greasy Fork镜像
