素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

AdobeReaderみたいにドラッグだけでスクロールするGreasemonkeyスクリプト

追記:bodyにmarginとかpaddingとかが取ってあっても平気なように、documentElement全体にstyleを当てるようにした。

ブックマークレット版:

javascript:(function(){document.documentElement.style.cursor='-moz-grab';var g,x,y,r=/input|textarea|button|select|a/i;addEventListener('mousedown',function(e){if(r(e.target.tagName))return;g=1;document.documentElement.style.cursor='-moz-grabbing';x=e.clientX,y=e.clientY;e.preventDefault()},0);addEventListener('mouseup',function(e){if(r(e.target.tagName))return;g=0,document.documentElement.style.cursor='-moz-grab';x,y=0;e.preventDefault()},0);addEventListener('mousemove',function(e){if(g)scrollBy(x-(x=e.clientX),y-(y=e.clientY)),e.preventDefault()},false)})()

Greasemonkeyスクリプト版:

// ==UserScript==
// @name           dragLikeAdobeReader
// @namespace      http://d.hatena.ne.jp/javascripter/
// @include        http*
// ==/UserScript==
(function() {
  document.documentElement.style.cursor = '-moz-grab';

  var grabbing = x = y = null;
  var rule = /input|textarea|button|select|a/i;

  window.addEventListener('mousedown',
  function(e) {
    if (rule.test(e.target.tagName)) return;
    grabbing = true;
    document.documentElement.style.cursor = '-moz-grabbing';
    x = e.clientX,
    y = e.clientY;
    e.preventDefault();
  },
  false);
  window.addEventListener('mouseup',
  function(e) {
    if (rule.test(e.target.tagName)) return;
    grabbing = false;
    document.documentElement.style.cursor = '-moz-grab';
    x,
    y = null;
    e.preventDefault();
  },
  false);

  window.addEventListener('mousemove',
  function(e) {
    if (grabbing) {
      scrollDocument(e);
      e.preventDefault();
    }
  },
  false);

  function scrollDocument(e) {
    window.scrollBy(x - (x = e.clientX), y - (y = e.clientY));
  }
})();