MomentumScrolling

Add drag-scrolling and momentum.
当前为 2017-06-12 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        MomentumScrolling
// @namespace   http://pussy/MomentumScrolling
// @include     *
// @version     1
// @grant       none
// @description Add drag-scrolling and momentum.
// ==/UserScript==
(function () {
  'use strict';
  // Settings -------------------------------------------------------
  var DRAG_BUTTON = 0; // 0:LeftButton, 1:MiddleButton, 2:RightButton
  var INERTIA = 0.95;
  var DRAG_TIMEOUT = 1000; // [ms] (cancel on Long tap)
  // ----------------------------------------------------------------
  var enabled = false;
  var dragging = false;
  var mouseX = 0;
  var mouseY = 0;
  var momentX = 0;
  var momentY = 0;
  var timeoutIds = {
  };
  var timeout = function (id, f, ms) {
    if (timeoutIds[id]) clearTimeout(timeoutIds[id]);
    if (f && ms) {
      timeoutIds[id] = setTimeout(f, ms);
    } else {
      timeoutIds[id] = null;
    }
  };
  var momentScroll = function (e) {
    if (Math.abs(momentX) < 0.01 && Math.abs(momentY) < 0.01) return;
    scrollBy(momentX, momentY);
    momentX *= INERTIA;
    momentY *= INERTIA;
    setTimeout(momentScroll, 16);
  };
  var dragEnd = function (e) {
    if (!dragging) return;
    dragging = false;
    document.body.classList.remove('drag-momental-scroll--dragging');
    timeout('resetMoment', null);
    setTimeout(momentScroll, 20);
  };
  var toggle = function (e) {
    enabled = arguments ? e : !enabled;
    if (enabled) {
      document.body.classList.add('drag-momental-scroll--enabled');
    } else {
      dragEnd();
      document.body.classList.remove('drag-momental-scroll--enabled');
    }
  };
  window.addEventListener('mousedown', function (e) {
    if (!enabled) return;
    if (e.button != DRAG_BUTTON) return;
    mouseX = e.clientX;
    mouseY = e.clientY;
    momentX = 0;
    momentY = 0;
    dragging = true;
    document.body.classList.add('drag-momental-scroll--dragging');
    timeout('cancel', function () {
      toggle(false);
    }, DRAG_TIMEOUT);
  });
  window.addEventListener('mouseup', function (e) {
    dragEnd(e);
    toggle(true);
  });
  window.addEventListener('mousemove', function (e) {
    if (!enabled) return;
    if (!dragging) return;
    if (window.getSelection().toString()) {
      toggle(false);
      return;
    }
    timeout('cancel', null);
    momentX = mouseX - e.clientX;
    momentY = mouseY - e.clientY;
    mouseX = e.clientX;
    mouseY = e.clientY;
    scrollBy(momentX, momentY);
    timeout('resetMoment', function (e) {
      momentX = 0;
      momentY = 0;
    }, 100);
  });
  document.getElementsByTagName('head') [0].appendChild(document.createElement('style'));
  var ss = document.styleSheets[document.styleSheets.length - 1];
  ss.insertRule('.drag-momental-scroll--enabled { cursor: default; }', 0);
  ss.insertRule('.drag-momental-scroll--dragging { cursor: grabbing !important;}', 0);
  toggle(true);
}) ();
欢迎访问Greasy Fork镜像
