PCサイトでドラッグスクロールを実装する方法（jQuery使用）

PCでもドラッグによるスクロールを実装しよう

PCサイトを閲覧している時、縦横にスクロール領域が広いデザインだと、スクロールバーが画面の外にはみ出してしまい、操作できなくなることはありませんか？

そんな時、マウスのドラッグ操作で直感的にスクロールできると、ユーザビリティが向上し、とても便利です。専用のプラグインを使う方法もありますが、今回はjQueryを使ってシンプルにドラッグスクロールを実装する一例を紹介します。

HTMLの解説

まず、ドラッグスクロールを適用させたい領域（親要素）を指定します。ここでは例として、id="js-scroll_drag_area" と class="scroll_area" を持つ <div> を設定しています。

<div class="scroll_area" id="js-scroll_drag_area">
  <div class="scrollinner">
    ここのエリアをスクロールする。
    <ul>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    </ul>
  </div>
</div>

CSS (SCSS) の解説

スクロールする領域の見た目を整えます。overflow: scroll; で、コンテンツが親要素のサイズを超えた場合にスクロールバーが表示されるように設定します。

また、ユーザー体験（UX）向上のため、cursor プロパティを変更するのがおすすめです。cursor: move; を指定すると、マウスカーソルが十字矢印の形に変わります。これにより、ユーザーは「ここはドラッグで動かせる」と直感的に理解できます。

（補足： cursor: grab; や cursor: grabbing; （掴む手のひらの形）も分かりやすいですが、IEなど一部のブラウザでは対応していないため、move が汎用性の高い選択肢です。）

.scroll_area {
  margin: 2em;
  padding: 2em;
  width: 300px;
  height: 300px;
  background: yellow;
  color: brown;
  overflow: scroll;
  /* カーソル変更 */
  cursor: move;
}

.scrollinner {
  width: 1200px;
  height: 1200px;
}

JavaScript (jQuery) の解説

今回の実装の核となる、jQueryを使ったドラッグスクロールのロジックです。jQueryのプラグイン形式（$.fn.dragScroll）で定義しています。

/* * ドラッグによるスクロール処理
 * -------------------------------------------------- */
$.fn.dragScroll = function() {
  var target = this;
  $(this).mousedown(function(event) { // マウスが押されたら処理開始
    $(this)
      .data('down', true) // 'down'フラグを「true」にする
      .data('x', event.clientX) // x軸の座標を取得
      .data('scrollLeft', this.scrollLeft) // 現時点のx軸スクロール量を取得
      .data('y', event.clientY) // y軸の座標を取得
      .data('scrollTop', this.scrollTop); // 現時点のy軸スクロール量を取得
    return false;
  });

  $(document).mousemove(function(event) { // マウスが動いた時の処理
    if ($(target).data('down') == true) { // 'down'フラグが「true」の場合のみスクロール実行
      // スクロール量を計算して適用
      // (現在のスクロール量 + 押した時点の座標 - 現在の座標)
      target.scrollLeft($(target).data('scrollLeft') + $(target).data('x') - event.clientX);
      target.scrollTop($(target).data('scrollTop') + $(target).data('y') - event.clientY);
      return false; // ドラッグ中の文字列選択を防ぐ
    }
  }).mouseup(function(event) { // マウスが離されたら
    $(target).data('down', false); // 'down'フラグを「false」にし、スクロール処理を停止
  });

  return this;
}

$(document).ready(function() {
  // id="js-scroll_drag_area" の要素にドラッグスクロール機能を適用
  $('#js-scroll_drag_area').dragScroll();
});

参考サイト

今回の実装にあたり、以下のWebサイトを参考にさせていただきました。

• jQueryプラグインじゃないけど、ドラッグしてスクロールするやつ
• jQuery逆引きリファレンス：jQueryプラグインを自作するには？
• jQuery プラグインの作り方（$.fn.extend）
• マウスイベント処理
• JavaScript マウス座標の取得まとめ

---

よくある質問（FAQ）

Q1. このコードはjQueryが必要ですか？

はい、今回のサンプルコードは jQuery を利用しています。$.fn.dragScroll や $(this) といった記述はjQuery特有のものです。このコードを動作させるには、あらかじめWebサイトでjQueryライブラリを読み込んでおく必要があります。

Q2. JavaScript（バニラJS）だけで実装できますか？

はい、jQueryを使わずに素のJavaScript（バニラJS）だけでも同様の機能は実装可能です。その場合、mousedown, mousemove, mouseup といった標準のDOMイベントを使い、event.clientX, event.clientY, element.scrollLeft, element.scrollTop などを組み合わせてロジックを構築します。コードの記述量は増えますが、ライブラリに依存しない実装が可能です。

Q3. PCサイトでドラッグスクロールはどんな時に便利ですか？

記事の冒頭でも触れたように、スクロール領域が非常に広く、標準のスクロールバーが画面外に出てしまう場合に特に有効です。また、地図や大きな表、ギャラリーなど、コンテンツ全体を直感的に動かして閲覧したいUI（ユーザーインターフェース）にも適しています。ただし、多用しすぎると通常のホイールスクロールやスクロールバー操作と競合し、ユーザーを混乱させる可能性もあるため、適用する箇所を限定するのが良いでしょう。