ZeroPlus Media > Web制作 > JavaScript > 【jQuery】スクロールでイベント発火。scrollイベントについて解説。

【jQuery】スクロールでイベント発火。scrollイベントについて解説。

JavaScript

2022/05/24

2023/05/08

jQueryにはスクロールすることでイベントが発火するscroll()イベントがあります。

scroll()イベントが扱えるようになると、スクロール量を取得したりスクロールした量に応じてイベントを発火させることができます。

様々なイベントを学ぶことで制作の幅が広がるので、知識として身に付けていきましょう！

この記事では「jQueryのscrollイベントの使い方」について解説します。

この記事で身につく内容

jQueryのscrollイベントの使い方

JavaScriptが難しくて挫折しそうなあなたへJavaScriptは独学で進めると難しい内容も多いですよね。相談相手がいないと煮詰まってしまうこともあるかと思います。

もし学習の進め方について悩まれているならば、ZeroPlusの無料相談会への参加をお勧めします。

ZeroPlusはWeb制作のフリーランス育成に特化したプログラミングスクールです。超フレンドリーなメンターがあなたの疑問や悩みについて、なんでもお答えします。

＼お申し込みは30秒で終わります。／

まずは無料で相談してみる

学習方法の悩み、私たちと一緒に解消しましょう！

scrol()イベントの使い方
まとめ

scrol()イベントの使い方

jQueryのscrollイベントは、jQueryのイベントの一つ。scroll()はスクロール中にイベントを発火させることができます。

基本書式出

$("要素").scroll(function(){
  // スクロールしたときの処理内容を記述する
});

上の書式にコードを当てはめると次のようになります。

<div class="scroll-area">
  <div class="box"></div>
</div>

.scroll-area {
  overflow: scroll;
  height: 200px;
  border: 1px solid black;
  width: 50%;
}

.box {
  width: 200px;
  height: 200px;
  background: orange;
  margin: 20px;
}

$('.scroll-area').scroll(function () {
  console.log("scroll!");
});

出力結果

テキストエリア内を縦にスクロールすると、コンソール画面でメッセージが表示されます。なお、横スクロールしてもメッセージが表示されます。

scrollTop：縦スクロールの位置を取得するメソッド

縦スクロールの位置を取得するには、scrollTop()メソッドを使います。例えば、縦スクロールの位置を取得する場合は次のようになります。

<p class="scroll-text">スクロール:<span></span></p>
<div class="scroll-area">
  <div class="box"></div>
</div>

.scroll-area {
  overflow: scroll;
  height: 200px;
  border: 1px solid black;
  width: 50%;
}

.box {
  width: 200px;
  height: 200px;
  background: orange;
  margin: 20px;
}

$('.scroll-area').scroll(function () {
  const el = $(this).scrollTop();
  $('.scroll-text').text("縦スクロール:" + el + "px");
});

出力結果

テキストエリアを縦スクロールすると、scrollTop();で位置を取得、変数に格納します。

.scroll-textクラスがついたpタグに、textメソッドで位置が出力されます。

scrollTop()を適用しているので、こちらの場合横スクロールをしても位置は取得できません。

scrollTop：横スクロールの位置を取得するメソッド

横スクロールの位置を取得するには、scrollLeft()メソッドを使います。例えば、横スクロールの位置を取得する場合は次のようになります。

<p class="scroll-text"></p>
<div class="scroll-area">
  <div class="box"></div>
</div>

.scroll-area {
  overflow: scroll;
  height: 200px;
  border: 1px solid black;
  width: 50%;
}

.box {
  width: 200px;
  height: 200px;
  background: orange;
  margin: 20px;
}

$('.scroll-area').scroll(function () {
  const el = $(this).scrollLeft();
  $('.scroll-text').text("横スクロール:" + el + "px");
});

出力結果

テキストエリアを横スクロールすると、scrollLeft();で位置を取得、変数に格納します。.scroll-textクラスがついたpタグに、textメソッドで位置が出力されます。

scrollLeft()を適用しているので、こちらの場合縦スクロールをしても位置は取得できません。

スクロールしたら背景色が変わる

scroll()イベントを使って、スクロールした量によってイベントを発火させることができます。例えば次のようなコードは、100px以上スクロールしたら背景色が変わる処理を設定しています。

スクロールで背景色が変わるサンプルコード

<header class="header"></header>
<div class="contents"></div>

.header {
  width: 100%;
  height: 100px;
  background: orange;
  position: fixed;
  top: 0;
  left: 0;
}

.header.change-color {
  background: red;
}

.contents {
  width: 100%;
  height: 2000px;
}

$(function () {
  const header = $('.header');
  $(window).scroll(function () {
    if ($(this).scrollTop() >= 100) {
      header.addClass('change-color');
    } else {
      header.removeClass('change-color');
    }
  });
});

出力結果

See the Pen scroll-top by ZeroPlus (@zeroplus-programming) on CodePen.

headerクラスを変数に格納します。

$(window)で画面全体がスクロールしたらイベントが発火するようにします。

$(this)はここでは$(window)を指しています。

画面全体で100px以上スクロールしたら、headerに.change-colorクラスを付与、そうでなければchange-colorクラスを外すという処理です。