使える? 使えない? ホイールを使わずマウス長押しで自動スクロール
11/07/10 IE9の不具合を修正しました。Prototype.jsバージョン1.7以上で動作します。
IE9対応バージョン(ver 2.0)
10/10/25 jQueryバージョン公開に合わせ、Prototype.jsバージョン(ver 1.0)も若干修正しました。ただ、機能や設置方法等に大きな変更はありません。
オンにするとクリックでスクロールできるようになります。
左クリックで下方向、右クリックで上方向にスクロールします。スクロール速度は3段階調整可能。
(ブラウザによってはうまく動作しない場合があります)
Scroller.js ホイールを使わず手軽にページをスクロールさせるスクリプト
マウスホイールを使っていても、縦に非常に長いページをスクロールしていると、見たいところまで飛ばすためにホイールをグリグリ
やるはめになり結果ストレスになることがあります。マウスホイールを使っている時点で非常に快適なはずなのですが、ネット環境では
目に見えないストレス要因――昔なら回線速度など――が案外多いです。前回小説関連のページを作ったときにもっと
ストレスフリーなスクロール方法はないかと考え、JavaScriptで動くスクロール機能を試作してみることにしました。
一方、マウスホイール以外にもHome/EndキーやPageUp/PageDownキーでスクロールさせる方法があります。しかしこれらは、
「押し間違え」以外では一般にあまり使われていないような気がします。もっとも、エクセルとかで事務処理を仕事でしている人は
こういうショートカットを多様するかもしれないですが。また、PageUp/PageDownキーはスクロール量が大雑把なので、もう少し繊細な
動きをする機能が欲しいと考えました。
試しに「マウスでスクロール」というボタンを押してみてください。「ON」になると左クリックボタンで下方向へ、右クリックボタンで
上方向へスクロールできるようになります。もう一度ボタンを押して「OFF」にするとこの機能が停止します。スピードを三段階まで
調整可能で、またダブルクリックにも一応対応(注:ダブルクリックはIE非対応です)。二回すばやくクリックする(正確には二回目のクリックでボタンを長押しする)と
倍の速さでスクロールするようになります。これはマウスを押している間有効です。ただし、マウスボタンについてはPrototypeライブラリを
使用していてもブラウザ間の 差異をなくすのは難しく(IEはダブルクリックがうまく動作しない)、その他カクカクして
スムーズにいかない場合があります。また、Operaでは上方向のスクロール、つまり右クリックボタンを押すとコンテキストメニューが
出てきてしまいます。
このスクリプトの問題点を以下に挙げると、
欠点1:ブラウザによっては挙動に違いがでるか、もしくは動作しない。IEはダブルクリックに未対応。
欠点2:このスクリプトを導入したページ以外で動作しない。
欠点3:スイッチを入れている間はコンテキストメニューなどのイベントが機能しない。
欠点4:例によってPrototype依存……jQuery勉強しようかな。
ちなみに、JavaScript処理最速のChromeは、自分の環境では非常にスムーズな動作をします。
このスクリプトの利用は小説などの長大なコンテンツを持つサイトなどに限定されると思います。
とはいえ、あってもなくてもコンテンツ利用にほとんど支障がないのでおまけ機能程度に考えてもらればいいと思います。
Scroller.jsの導入はPrototypeの使用という一番大きな障壁をクリアできれば簡単にできます。
まず、Prototypeをアップロードし、HTMLのheadタグ内にJSファイルを記述します。
Prototypeはここからダウンロードできます。
(注意)次のようにGoogleのAjaxライブラリホスティングサービスを使うと自サイトにファイルを置く手間を省け便利です。
HTMLドキュメントに追加するタグは以下の通りです。
optionタグのvalue属性でそれぞれスクロールの速度設定をしています。変更したいときはvalue属性値に0以上の整数値
を入れてください。数字が大きくなるほどスクロール速度がアップします。また、上記のHTMLに対応するCSSは次のようになっています。
こちらも任意で変更してください。CSSはstyleタグ内に記述するかもしくは外部ファイルとして分離します。
Scroller.jsの部分を以下に記します。内容の変更は特に必要ありませんが、
ダブルクリックの許容間隔を変更したいというときは、87行の「300」という数値の部分を修正します(デフォルトは300ミリ秒=0.3秒)。
また、こちらのコードもscriptタグ内に記述するかもしくは外部ファイルとして分離してください。(10/01/25若干修正)
(注意)スクリプトはページトップのURLからダウンロードできます。
Prototypeライブラリは修正が必要
ここでちょっとした問題が。Prototypeの右クリックを判定するメソッドisRightClick()が、最新のversion 1.6.1でSafari、Chromeなど
Webkit系ブラウザで動作しないということが分かりました。解決法がこちらで
紹介されています。過去のバージョンでも同様なのかは不明です。具体的には右クリックに関するコードが1行抜けているのが原因でした。
(注意)バージョン1.7以上で修正済みです。
上記の行に以下の一文を追加するとちゃんと動作します。しかし、実はそのすぐ上の行の記述にも誤りがあることが判明しており、
コード内の合わせて二箇所を修正する必要があります。