ポンクソフト

iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる - jQuery入門

前ページ jQuery入門 TOP 次ページ

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

フリック!フリック!

iPhoneを触ってみると、文字入力やスクロールでのフリック(はじく)操作が心地よいのです。そこでjQueryならフリックによるスクロールも簡単に実装できるんじゃないかな?と思ってやってみました。そういえば昔持っていたFM-TOWNSというパソコンに「猫の手スクロール」というものが流行ってまして、これがまさにフリックスクロールそのものでした。

フリックスクロールのデモ

ウインドウの真ん中あたりでマウスボタンを押したまま上下に動かして離してみてください。

フリックスクロールのソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>ページのフリックスクロール</title>
<script>
$(function() {
  var pushed = false;
  var y = 0;
  var vy = 0;
  $('body').mousedown(function(e) {
    $(this).css('cursor', 'n-resize');
    y = e.clientY;
    vy = 0;
    pushed = true;
    return false;
  }).mousemove(function(e) {
    if (pushed) {
      vy = y - e.clientY;
      y = e.clientY;
      $(window).scrollTop($(window).scrollTop() + vy);
    }
    return false;
  }).mouseup(function() {
    $(this).css('cursor', 'auto');
    pushed = false;
    var id = setInterval(function() {
      var top = $(window).scrollTop();
      $(window).scrollTop(top + vy);
      if (pushed || top == $(window).scrollTop()) {
        clearInterval(id);
      }
    }, 10);
    return false;
  });
});
</script>
</head>
<body>
ここにスクロールするコンテンツを入れます。
・・・
</body>
</html>

プログラムの解説

var pushed = false;
var y = 0;
var vy = 0;
pushedはマウスボタンが押されている間trueになるフラグです。yはマウスの現在位置のy座標、vyは縦方向の速度を保持します。
$('body').mousedown(function(e) {
  $(this).css('cursor', 'n-resize');
  y = e.clientY;
  vy = 0;
  pushed = true;
  return false;
ドキュメント内でマウスボタンが押されたときのイベントです。まずカーソルを上下方向の矢印にし、変数yにウインドウ最上部からのy座標を入れ、pushedフラグを立てます。
}).mousemove(function(e) {
  if (pushed) {
    vy = y - e.clientY;
    y = e.clientY;
    $(window).scrollTop($(window).scrollTop() + vy);
  }
  return false;
こちらはドキュメント内でマウスが移動したときのイベントです。pushedフラグを見てマウスボタンが押されているときのみ、ひとつ前のイベントのy座標と現在のy座標の差から速度を割り出し変数vyに代入し、その速度分だけウインドウをスクロールさせています。
}).mouseup(function() {
  $(this).css('cursor', 'auto');
  pushed = false;
  var id = setInterval(function() {
    ・・・
  }, 10);
  return false;
});
こちらはマウスボタンが離されたときのイベントです。カーソルを元に戻し、pushedフラグをクリアし、フリック(はじく)スクロールを実現するためにウインドウをスクロールするタイマイベントを10msの間隔で呼び出すように設定しています。タイマイベントの中身は以下の通り。
var top = $(window).scrollTop();
$(window).scrollTop(top + vy);
if (pushed || top == $(window).scrollTop()) {
  clearInterval(id);
}
マウスが離された瞬間の速度がvyに入っているので、その分量だけウインドウをスクロールさせ、マウスボタンが再度押されるか、またはスクロールがコンテンツの最初や最後で止まったとき、clearIntervalでタイマイベントをクリアしています。

注意点

ブラウザの外に出たりすると動作が変になりますが、対応するとソースが長くなって面倒なのでそのままです。
前ページ jQuery入門 TOP 次ページ
このエントリーをはてなブックマークに追加 そっか0