JavaScript : Autoscroll.js

つかいかた

// マウスイベントの監視を
Autoscroll.start(); // 開始
Autoscroll.stop(); // やめる

動作確認

  • Opera 9
  • Firefox 2
  • Safari 3
  • IE 6 / 7

デモ

sample_autoscroll.html

shift キーを押しながらマウスポインタを動かすと開始!

手を離せばそのままスクロールされ続ける。 1 ピクセルでも動かせば止まる。

( shift 押しながら)対象の要素の、外側にいくほど速度アップ。

ソース

Autoscroll.js

グリモン

autoscroll.user.js

上に挙げたうちの IE を除くブラウザで。

左下にマウスポインタを持っていくとオンとオフが切り替わるようになってる。

追記:色々なサイトで試してみたら…

Safari や Opera では残念ながら、上のような「模範的な都合のいい例」以外のデザインで、うまくいかないことが多々ありました。 でもせっかくなのでアップしておきます。

他にも、スクロールできそうなところを勝手に最優先するので…まあその、ええと、察して下さい。

body 要素の縦スクロールに限ると話は至極簡単ですが、それでは何もおもしろくないので、たぶん作りかえないと思います。

ctrl 押しで body 要素、 shift ならその他、というように、そのうち操作を分けるかもしれません。それなら煩雑ではありますが、ある程度は確実です。

オートスクロールってなにさ

あの、マウスの真ん中のボタンで、びよーんってできるようになるやつ。

手を離しても自動でスクロールを進めてくれるから、 誰かの tumblr を眺めたり長文のテキスト系サイトを一定速度で読みたいといったときに、 Autopagerize と一緒に使うと便利だった。

でも、ノートパソコンでマウスがないと、できなかった。

雑感

かなり(縦に)長めのページでは特に、少しバーを触っただけで画面が移動しすぎるということがなくなって、とてもいい。

上下キーやトラックパッドの二本指でちまちまスクロールしたくなかった。 pageUP/Down でもいいんだけど、それはそれでページの途中で見失うことがあったりした。

(Opera とか)ブラウザによってはデフォルトのオートスクロールが body 要素にしか効かないこともあるので、マウスの繋がってるときでも使えると思う。

(でもレトロなフレームデザインや妙なボックスデザインとかでは、 動いたり動かなかったり…><)

さりげなく LDR と相性がいい気がする。フォルダの中にたくさんフィードがあって手動で一つを選びたいときとか、バババババって滑らかにスクロールできるのが楽しい。

コードの中身

shift 押下で mousemove という操作は、 意外なことにまだ割り当てられていないので、 特に他と干渉するということもない、はず、たぶん。 もし気に入らなかったら、適当にソースの変更を。

関数 check_key() で例えば、 e.shiftKey && e.ctrlKey に変えるといったように。

マウスポインタの速度は人によって好みが違うので、 いじる場合には関数 calc() 以下を。

パラメータ化はしてない。逆にコードが汚くなってしまったので。

check_position() は Safari 対策。 一つ前と比較して位置に変化がないイベントは除外するように。 私の環境では、 mousemove イベントがなぜか shift キーなどで発生してしまっていたので。

check_time() は、 125 ms 以上の間隔でイベントを処理するための関数。 全ての mousemove イベントでは無駄に計算をしすぎるため。

履歴

スクロールの量を可変にする。 マウスポインタの位置で速度が変わるように。

時間の間隔も動的に変わるようにする。数ピクセル単位でゆっくりスクロールさせたくて。 これによって、縦と横とで別々にタイマーを起動させることになった。

スクロールの量がゼロのときにはタイマーが止まるようにした。

IE 7 での動作を確認。ここで ver.1.0.0 に。

バグ修正。対象が html 要素のときは body 要素をスクロールするように変更。

2007年12月27日 18:34   [ permalink ]

トラックバックURL

この記事にコメントする

名前
URL
本文