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

フリック！フリック！

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　次ページ

ポンクソフト