はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの基本的な知識があり、Webサイトのインタラクティブな機能に興味があるWeb開発者を対象としています。特に、マウスホイール操作で横スクロールを実装したいと考えている方に最適です。

この記事を読むことで、mousewheel.jsライブラリを使って簡単に横スクロールを実装する方法、スクロール速度や方向のカスタマイズ方法、そして実装中に遭遇する可能性のある問題の解決方法を習得できます。具体的なコード例を交えて解説するので、実際のプロジェクトにすぐに応用できるでしょう。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • HTML/CSSの基本的な知識
  • JavaScriptの基本的な知識
  • npmやCDNを使ったライブラリの導入経験

mousewheel.jsとは

mousewheel.jsは、マウスホイールのイベントを簡単に扱うための軽量なJavaScriptライブラリです。特に、デフォルトの縦スクロールとは異なる横スクロールを実装したい場合に便利です。このライブラリは、クロスブラウザ対応がされており、複雑なブラウザ間の差異を意識せずにスクロールイベントを処理できます。

横スクロールは、ギャラリー表示や水平型のナビゲーション、パララックス効果など、現代のWebサイトで頻繁に使用される機能です。mousewheel.jsを使うことで、これらの機能を少ないコード量で実装でき、パフォーマンス面でも優れた結果を得られます。

横スクロールの実装方法

ステップ1: mousewheel.jsの導入

まず、mousewheel.jsをプロジェクトに導入します。CDNを使用する方法とnpmでインストールする方法の2通りがあります。

CDNを使用する場合

HTMLファイルの<head>タグ内に以下のCDNリンクを追加します。

Html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

npmを使用する場合

ターミナルで以下のコマンドを実行してインストールします。

Bash

npm install jquery-mousewheel

インストール後、JavaScriptファイルで以下のように読み込みます。

Javascript

import 'jquery-mousewheel';

ステップ2: 基本的な横スクロールの実装

mousewheel.jsの導入が完了したら、実際に横スクロールを実装します。ここでは、水平方向にスクロール可能なコンテナを作成します。

まず、HTMLでスクロール対象のコンテナを準備します。

Html

<div class="horizontal-scroll">
  <div class="scroll-content">
    <div class="scroll-item">アイテム1</div>
    <div class="scroll-item">アイテム2</div>
    <div class="scroll-item">アイテム3</div>
    <!-- さらにアイテムを追加 -->
  </div>
</div>

次に、CSSでスタイルを設定します。

Css

.horizontal-scroll {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-block;
}

.scroll-item {
  display: inline-block;
  width: 300px;
  height: 200px;
  margin-right: 20px;
  background-color: #f0f0f0;
}

最後に、JavaScriptでmousewheel.jsを使用して横スクロールを実装します。

Javascript

$(document).ready(function() {
  $('.horizontal-scroll').mousewheel(function(e, delta) {
    e.preventDefault();
    this.scrollLeft -= (delta * 50);
  });
});

このコードでは、mousewheelイベントを監視し、イベントオブジェクトから取得したdelta値（スクロールの方向と量）に基づいて、コンテナのscrollLeftプロパティを変更しています。delta * 50の部分はスクロール速度を調整する係数です。

ステップ3: カスタマイズ方法

スクロール速度の調整

スクロール速度を調整するには、deltaに掛ける係数を変更します。値が大きいほどスクロール速度が速くなります。

Javascript

$(document).ready(function() {
  $('.horizontal-scroll').mousewheel(function(e, delta) {
    e.preventDefault();
    this.scrollLeft -= (delta * 100); // 係数を100に変更
  });
});

スクロール方向の反転

スクロール方向を反転させたい場合は、係数の符号を変更します。

Javascript

$(document).ready(function() {
  $('.horizontal-scroll').mousewheel(function(e, delta) {
    e.preventDefault();
    this.scrollLeft += (delta * 50); // +に変更
  });
});

スムーズスクロールの実装

デフォルトのスクロールではなく、アニメーション付きのスムーズスクロールを実装するには、jQueryのanimateメソッドを使用します。

Javascript

$(document).ready(function() {
  $('.horizontal-scroll').mousewheel(function(e, delta) {
    e.preventDefault();
    const scrollAmount = delta * 100;
    $(this).stop().animate({
      scrollLeft: $(this).scrollLeft() + scrollAmount
    }, 800); // アニメーション時間(ms)
  });
});

複数のスクロールコンテナの対応

ページ内に複数のスクロールコンテナがある場合、イベントのバブリングを防ぐためにevent.stopPropagation()を使用します。

Javascript

$(document).ready(function() {
  $('.horizontal-scroll').mousewheel(function(e, delta) {
    e.stopPropagation(); // イベントのバブリングを防止
    e.preventDefault();
    $(this).stop().animate({
      scrollLeft: $(this).scrollLeft() - (delta * 100)
    }, 800);
  });
});

ハマった点やエラー解決

問題1: スクロールが全く動作しない

症状: mousewheel.jsを読み込んだにもかかわらず、スクロールが全く動作しない。

原因: jQueryの読み込みがmousewheel.jsの前にされていない可能性があります。

解決策: jQueryライブラリの読み込みがmousewheel.jsの前にされていることを確認します。正しい順序は以下の通りです。

Html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

問題2: 縦スクロールが動かない

症状: 横スクロールは動作するが、ページ全体の縦スクロールが動作しない。

原因: e.preventDefault()でデフォルトのスクロール動作を無効化しているため。

解決策: 特定の条件下でのみスクロールを無効化するようにロジックを変更します。

Javascript

$(document).ready(function() {
  $('.horizontal-scroll').mousewheel(function(e, delta) {
    // スクロール対象の要素が左右端にある場合のみデフォルト動作を無効化
    if ((delta < 0 && $(this).scrollLeft() < $(this)[0].scrollWidth - $(this).outerWidth()) ||
        (delta > 0 && $(this).scrollLeft() > 0)) {
      e.preventDefault();
      this.scrollLeft -= (delta * 50);
    }
  });
});

問題3: スクロールがカクカクする

症状: スクロールが滑らかではなく、カクカク動作する。

原因: イベントの連続的な発生によるスクロールの不整合。

解決策: jQueryのstop()メソッドでアニメーションを停止し、新しいスクロールイベントを即座に開始するようにします。

Javascript

$(document).ready(function() {
  $('.horizontal-scroll').mousewheel(function(e, delta) {
    e.preventDefault();
    $(this).stop().animate({
      scrollLeft: $(this).scrollLeft() - (delta * 100)
    }, 200); // アニメーション時間を短くする
  });
});

問題4: モバイルデバイスでスクロールできない

症状: PCでは正常に動作するが、スマートフォンやタブレットではスクロールできない。

原因: mousewheel.jsはマウスホイールイベントに特化しており、タッチイベントには対応していない。

解決策: タッチスクロール用の別のライブラリ（如Hammer.js）を併用するか、タッチイベントを直接処理するコードを追加します。

Javascript

$(document).ready(function() {
  const scrollContainer = $('.horizontal-scroll')[0];
  let isDown = false;
  let startX;
  let scrollLeft;

  // マウスイベント
  $(scrollContainer).on('mousedown', (e) => {
    isDown = true;
    startX = e.pageX - scrollContainer.offsetLeft;
    scrollLeft = scrollContainer.scrollLeft;
  });

  $(scrollContainer).on('mouseleave', () => {
    isDown = false;
  });

  $(scrollContainer).on('mouseup', () => {
    isDown = false;
  });

  $(scrollContainer).on('mousemove', (e) => {
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - scrollContainer.offsetLeft;
    const walk = (x - startX) * 2;
    scrollContainer.scrollLeft = scrollLeft - walk;
  });

  // ホイールイベント
  $(scrollContainer).mousewheel(function(e, delta) {
    e.preventDefault();
    this.scrollLeft -= (delta * 50);
  });
});

まとめ

本記事では、mousewheel.jsを使った横スクロールの実装方法について解説しました。

  • mousewheel.jsの基本的な導入方法
  • 横スクロールの実装手順
  • スクロール速度や方向のカスタマイズ方法
  • 実装中に遭遇する問題とその解決策

この記事を通して、読者はmousewheel.jsを使って滑らかな横スクロールを実装するスキルを習得できたはずです。これにより、ギャラリー表示や水平ナビゲーションなど、よりリッチなユーザーインターフェースをWebサイトに導入できるようになります。

今後は、スクロール連動アニメーションやパララックス効果との組み合わせについても記事にする予定です。

参考資料