【jQuery】ボタンにホバーしたら対象の要素を横スクロール！初心者でも分かる簡単実装ガイド！

2024年12月10日
2024年12月25日
JavaScript
jQuery

JavaScript

Webサイトで横スクロールのエフェクトを追加したいとき、ホバーするだけでスムーズに動かせると便利ですよね。

この記事では、jQueryを使って要素にホバーした際に横スクロールを実現する方法を分かりやすく解説します！

jQueryを使って横スクロールを実装する方法
横スクロールの効果を実現するためのコード例
scrollLeftプロパティやanimate()メソッドを活用したスクロール動作の制御
レスポンシブデザインを考慮した横スクロールの実装方法

1 実現する動作
- 1.1 HTMLを準備する
- 1.2 横スクロールのデモ
2 アレンジしてみる。ボタンにホバーしたら、左右に横スクロールさせる。
3 スクロールさせる機能の仕組みと解説
4 .hover()メソッドに書き換えてみた。
5 まとめ

実現する動作

実装する動作は、次のようなものです。

マウスを要素にホバーすると、要素が横スクロール。
マウスを離すとスクロールが停止。

実装手順

それでは、実装の手順をみていきましょう。

HTMLを準備する

今回は、以下のような横並びの要素が入ってコンテンツを用意します。

<div class="scroll-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

必要に応じて、画像などに置き換えてください。

１枚の画像を使って、パノラマ画像なんかをスクロールさせることも可能です。

CSSで横スクロールを可能にする

HTMLの次は、CSSです！

.scroll-container {
  width: 300px;
  height: 100px;
  overflow-x: auto;
  white-space: nowrap;
  border: 1px solid #ccc;
}

.scroll-container div {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: lightblue;
  margin-right: 10px;
  line-height: 100px;
  text-align: center;
}

jQueryでホバー時に横スクロールを追加する

最後は、いよいよjQueryの実装です。

ホバーの動作を制御するイベント、「mouseenter」と「mouseleave」を使用します。

$(document).ready(function () {
  var scrollSpeed = 10; // スクロール速度
  var interval;

  $(".scroll-container").on("mouseenter", function () {
    var container = $(this);
    interval = setInterval(function () {
      container.scrollLeft(container.scrollLeft() + scrollSpeed);
    }, 30); // スクロール間隔
  });

  $(".scroll-container").on("mouseleave", function () {
    clearInterval(interval);
  });
});

今回は、「mouseenter」と「mouseleave」を使いましたが、.hover()メソッドを使用しても同じ動作を実装することが可能です。

横スクロールのデモ

お待たせいたしました。

それでは、上記コードのデモをお見せ致します。

See the Pen Untitled by 1buk1 (@1buk1) on CodePen.

アレンジしてみる。ボタンにホバーしたら、左右に横スクロールさせる。

上記では、要素にホバーしたときに横スクロールしていました。

また、スクロールは右にスクロールするだけで、左には移動できませんでした。

これでは、少し不便なので、ボタンをつけて、左右に横スクロールさせるようにアレンジしてみました。

See the Pen Untitled by 1buk1 (@1buk1) on CodePen.

scroll-container内のアイテムを１枚の画像に変更して、その画像をパノラマ写真なんかにすれば、横スクロールで全体を見渡せるようなデザインも実装可能です！

スクロールさせる機能の仕組みと解説

それでは、コードを解説していきます。

横スクロールを制御する

    // 左スクロール
    $(".scroll-left").on("mouseenter", function () {
      var container = $(".scroll-container");
      interval = setInterval(function () {
        container.scrollLeft(container.scrollLeft() - scrollSpeed);
      }, 30); // スクロール間隔
    });

    $(".scroll-left").on("mouseleave", function () {
      clearInterval(interval);
    });

    // 右スクロール
    $(".scroll-right").on("mouseenter", function () {
      var container = $(".scroll-container");
      interval = setInterval(function () {
        container.scrollLeft(container.scrollLeft() + scrollSpeed);
      }, 30); // スクロール間隔
    });

    $(".scroll-right").on("mouseleave", function () {
      clearInterval(interval);
    });

「mouseenter」と「mouseleave」を使うことで、対象の要素にホバーしているときの動作を制御しています。

「mouseenter」と「mouseleave」のイベントの使い方

mouseenter（ホバー開始）で、ボタンにマウスが乗ったときに、setIntervalを使って一定間隔でscrollLeftを更新させることで、継続的に左右へスクロールさせます。

mouseleave（ホバー終了）は、ボタンからマウスが離れる動作を設定するのですが、それはclearIntervalでスクロールを停止させるようにしています。

左右のスクロール制御

HTML要素の横スクロール位置は、scrollLeftプロパティを使って制御します。

このプロパティの値を増やせば右に、減らせば左にスクロールします。

//マイナスにすると左へスクロール
container.scrollLeft(container.scrollLeft() - scrollSpeed);

//プラスにすると右へスクロール
container.scrollLeft(container.scrollLeft() + scrollSpeed);

スクロールの速度調整

スクロールの調整は、以下の部分を数値を調整してください。

var scrollSpeed = 10; // スクロール速度

10から数字を上げれば早くなり、下げることで遅くすることができます。

.hover()メソッドに書き換えてみた。

これまでは、「mouseenter」と「mouseleave」を使っていましたが、下記では.hoverメソッドに書き換えてみました。どちらも、同様の動作になりますが、記述が簡略化されるので、こちらの方が可読性があがります。

  $(document).ready(function () {
    var scrollSpeed = 10; // スクロール速度
    var interval;

    // 左スクロール
    $(".scroll-left").hover(
      function () {
        var container = $(".scroll-container");
        interval = setInterval(function () {
          container.scrollLeft(container.scrollLeft() - scrollSpeed);
        }, 30); // スクロール間隔
      },
      function () {
        clearInterval(interval);
      }
    );

    // 右スクロール
    $(".scroll-right").hover(
      function () {
        var container = $(".scroll-container");
        interval = setInterval(function () {
          container.scrollLeft(container.scrollLeft() + scrollSpeed);
        }, 30); // スクロール間隔
      },
      function () {
        clearInterval(interval);
      }
    );
  });

使い方は簡単です。

$(".scroll-left").hover(
  function () {
    // ホバー開始時の処理
  },
  function () {
    // ホバー終了時の処理
  }
);

「mouseenter」と「mouseleave」と同じように、「ホバーしたとき」「ホバーが終了したとき」と動作を分けて記述してあげるだけです。

.hover()のメリット・デメリット

可読性が上がる.hover()メソッドですが、デメリットもあります。

メリットと合わせて記載しますので、確認してから使用してください。

メリット

1. コードの可読性

開始時と終了時の処理がひとまとまりになっており、視覚的に見やすい。
短いコードで済むため、簡潔に記述できる。

2. イベントが一目で分かる

.hover()と書くだけでホバー時の挙動とわかりやすい。

デメリット

1. 柔軟性に欠ける

より複雑なロジックを追加したい場合（たとえば、複数のイベントを組み合わせる場合）は、mouseenter/mouseleaveのほうが管理しやすい。

2. 廃止の可能性

.hover()はjQuery独自の機能であり、原則的に最新のJavaScriptでは使われない傾向があります（ネイティブのaddEventListenerなどに比べると時代遅れとされがち）。

mouseenter / mouseleaveのメリット・デメリット

一見.hover()の方が良さそうに見えますが、mouseenter / mouseleaveにもメリットはあります。

デメリットと合わせて記載しますので、.hover()同様に確認してから使用してください。

メリット

1. 柔軟で拡張性が高い

個別のイベントリスナーを追加できるため、複雑な処理や異なる条件に対応しやすい。

2. 標準的なアプローチに近い

.hover()はjQuery独自ですが、mouseenterとmouseleaveはJavaScript標準イベントです。jQuery以外に移行する場合も対応が楽です。

デメリット

1. 冗長になりがち

ホバー開始と終了の処理を分けて記述する必要があるため、コードが長くなりやすい。

2. 見た目で分かりにくい

ホバーという意図がコードから直感的に読み取れない場合があります。

結論：どちらを選ぶべき？

それでは最後にどちらを使えばいいのか、書いておきます。

メリット・デメリットを理解した上で、最終判断の材料にしてください。

1. シンプルな用途であれば、.hover()を選択

今回のような左右スクロールのような単純な動作には.hover()が適しています。コードが短く、意図が分かりやすいからです。

2. 複雑なロジックやカスタマイズが必要なら、mouseenterとmouseleaveを選択

条件分岐や他のイベントとの組み合わせを行いたい場合には、mouseenterとmouseleaveの方が柔軟に対応できます。

私の個人的なおすすめは、.hover()で試し、必要に応じてmouseenter/mouseleaveに切り替えるです！

特に保守性が重視される場面では、mouseenterの方が将来的な変更に強いですが、無理に使う必要はありません。

まとめ

今回の記事では、jQueryを使って要素にホバーした際に横スクロールを実現する方法を解説しました。

最初は単純な右スクロールの仕組みを理解してから、ボタンによる左右のスクロール制御にも挑戦してみてください。

コードの仕組みを理解しているのとそうでないのでは、大きな差があります。

まずは、基本からです。焦らず、挑戦してみましょう。

余裕ができたら、コードを.hover()に書き換えることで可読性を高める工夫にも挑戦してみましょう！

初心者の方でも扱いやすいシンプルな構造になっていますので、使い慣れると.hover()の方が使いやすくなるかもです。ただ、メリット・デメリットは忘れずに！

ぜひ活用してみてください！