2009年07月05日

ダブルクリックでスクロールするスクリプト

マウス片手にだらだらネットサーフィンしているときに、「ページの一番上に戻りたい」あるいは「一番下まで進みたい」なんてことはよくあると思います。キーボードのHomeやEndを押せば目的は果たせますが、キーボードまで手を伸ばすのが億劫なことって有りますよね。え?ない?そうですか。

そんなものぐさな願いを叶えるために、マウスだけでページの一番上、あるいは一番下までスクロールできるスクリプトを書いてみました。Opera9.6、Firefox3.5で動作確認。

endhome.user.js

ページの適当な場所をダブルクリックしてみてください。画面の上半分をダブルクリックした場合はページの一番上に、下半分をダブルクリックした場合はページの一番下にスクロールします。

うっかりダブルクリックして予期せぬスクロールをしてしまった場合は、マウスでのスクロールを行わずに再びダブルクリックすると、スクロールする前の位置に戻ります。

マウスジェスチャーで事足りるって話もありますが。代替方法として。

ソースはつづきから。

ダブルクリックしたときのマウスの位置からスクロール先を判別。その後イージングをかけつつスクロールする関数を10msごとに呼び出しています。デフォルトでは一つの処理で40回スクロールする関数を呼び出すようにしています。動作が重い場合は、scrollDiv変数をいじってみてください。

(function() {
	var scrollPos;	// 現在のスクロール位置
	var mousePos;	// ダブルクリック時のマウスカーソルの位置
	
	var scrollDiv = 40;		// スクロールの分割数
	var scrollSpeed = 0.6;	// スクロールスピードの度合い
	var prevScroll;			// 直前にスクロール位置
	var prevScrollType;		// 直前のスクロール内容
	var finishFlag = false;	// homeまたはendスクロール直後かどうか
	
	var to = 0;
	
	// ダブルクリック時
	document.body.addEventListener('dblclick', function(evt) {
		// スクロール位置を取得
		scrollPos = document.body.scrollTop || document.documentElement.scrollTop;
		
		// マウスポインタの位置を取得
		if(evt) mousePos = evt.pageY - scrollPos;
		else 	mousePos = event.y;
		
		// マウスのクリック位置を判定
		var whichHalf = mousePos < (innerHeight / 2) ? 'upper' : 'lower';
		
		// 1. homeまたはendへのスクロール直後で
		// 2. 前回と同じ領域をダブルクリックしていた場合
		if(finishFlag && ((whichHalf == 'upper' && prevScrollType == 'home') || (whichHalf == 'lower' && prevScrollType == 'end'))) {
			to = prevScroll;
			finishFlag = false;
		}
		// 初回、または元の位置に戻った(↑のブロックが実行された)直後
		else {
			prevScroll = scrollPos;
			
			if(whichHalf == 'upper') {
				to = 0;
				prevScrollType = 'home';
			}
			else {
				var height = document.body.scrollHeight || document.documentElement.scrollHeight;
				to = height - innerHeight;
				prevScrollType = 'end';
			}
			
			finishFlag = true;
		}
		
		easyScroll(to);
		
		return false;
	}, false);
	
	document.body.addEventListener('DOMMouseScroll', function() {
		finishFlag = false;
	}, false);
	
	// イージングをかけてスクロール
	function easyScroll(to) {
		for(var i = 0; i <= scrollDiv; i++) {
			var ratio = i / scrollDiv;
			var go = scrollPos - (scrollPos - to) * Math.sin(ratio * Math.PI / 2);	// sinでイージングをかける
			setTimeout('window.scrollTo(0, ' + go + ')', i * 10);
		}
		
		return false;
	}
	
	return false;
})();

何だろう、なんだか・・・読みにくい。



タグ :Userscript

同じカテゴリー(プログラミング)の記事画像
GoogleReaderを3ペイン表示にするスクリプトのα版
文字サイズを拡大縮小するスクリプト
電卓を表示するブックマークレット
Twitterで費やした時間を表示するスクリプト
ニコニコのタグをプレビューするスクリプト
ニコニコで広告を消すスクリプト
同じカテゴリー(プログラミング)の記事
 GoogleReaderを3ペイン表示にするスクリプトのα版 (2009-07-26 22:00)
 クリック動作を無効にするジョークブックマークレット (2009-07-19 23:52)
 文字サイズを拡大縮小するスクリプト (2009-07-12 18:09)
 電卓を表示するブックマークレット (2009-06-27 21:40)
 ごくごく一部の顔文字を絵文字に置き換えるスクリプト (2009-05-21 23:06)
 EclipseでC++ & OpenCV環境をつくる。 (2009-05-02 23:36)
Posted by Handle at 14:22│Comments(0)プログラミング
コメントフォーム
上の画像に書かれている文字を入力して下さい
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。