【jQuery】マウスホイールのスクロールを滑らかにするプラグイン3選

こんにちは、Ryohei（@ityryohei）です！

ウェブページでマウスホイールのスクロールを滑らかにするjQueryプラグインのご紹介です。

ブラウザでウェブページを閲覧しているとマウスホイールを回転させてページを下にスクロールすることがあるかと思います。

通常はマウスホイールを回転させると回転量に応じて素早くページがスクロールされるかと思いますが、本記事でご紹介する方法を実装すると、マウスホイールの回転が終わった際にすぐに停止するのではなく、フェードアウトするような形で滑らかに停止させることが可能となります。

このようなスクロールを「慣性スクロール」と言います。

慣性スクロールをサイトに取り入れることでページ全体のスクロールが滑らかになり、停止する際に余韻を持たせることができるようになるため、独特なスクロールを実装したい場合におすすめです。

本記事ではjQueryのプラグインを使用して慣性スクロールを簡単に実装する方法をご紹介しています。

本記事の内容

jquery-inertiaScroll
NiceScroll
easeScroll

では、解説していきます。

jquery-inertiaScroll

jquery-inertiaScrollはオープンソースのMITライセンスのプラグインです。jQuery1.9.1から動作します。2017年の10月が最後のアップデートとなっていいますが、jQuery3.3.1でも動作することを確認しています。

DEMO

下記はjquery-inertiaScrollを使用したデモです。ページを実際にスクロールしてみてください。滑らかなスクロール（慣性スクロール）が有効になっているかと思います。

See the Pen
SmoothScroll1 | jQuery by ryoy (@intotheprogram)
on CodePen.

ページのスクロールが慣性スクロールになっていることを確認していただけたでしょうか。デモではデフォルトの状態でjquery-inertiaScrollを使用していますが、十分素敵なスクロールになっているかと思います。スクロールに変化をつけるだけでもサイトの印象が大きく変わりますね。

では、実際に配布サイトからプラグインをダウンロードして慣性スクロールを実装してみましょう。

配布サイト

プラグイン本体の配布サイトです。Githubにて公開されています。下記のページに詳しいドキュメントが用意されていますので、使用される場合はご一読いただければと思います。

https://github.com/underground0930/jquery-inertiaScroll

使い方

jquery-inertiaScrollの使い方です。jQueryのプラグインになりますので、jQuery本体と「配布サイト」からダウンロードしたプラグイン本体を読み込みます。

注意点として、jquery-inertiaScrollを使用する場合、bodyの直下に存在するすべてのコンテンツを囲う要素、いわゆるラッパーと呼ばれるものが必要になります。下記でいうところの「wrap」がすべてを囲う要素となります。

スクリプトには、jQueryのセレクタに「wrap」の子要素を指定し、オプションの「parent」には親要素である「wrap」を指定します。

まとめると下記のような記述になります。

HTML

<!-- jQueryを読み込む -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- プラグインを読み込む -->
<script src="path/jquery-inertiaScroll.js"></script>  
<!-- wrapですべてコンテンツを囲む -->
<div id="wrap">
  <header>Header</header>
  <main>
    <section>1</section>
    <section>2</section>
    <section>3</section>
    <section>4</section>
    <section>5</section>
  </main>  
  <footer>Footer</footer>
</div>

JS

$(function(){
  $('header, main, footer').inertiaScroll({
    parent: $("#wrap")

    //オプションを追加する場合はここに追記

  });
});

ここまでの記述で、ページのスクロールが慣性スクロールになっているかと思います。デフォルトの状態でも素敵なスクロールになっているかと思いますが、下記のオプションやdata属性を指定することでさらに自分の好みに近づけることができます。

オプション

jquery-inertiaScrollに用意されているオプションです。上記でご紹介したJSに追記することができます。

parent	bodyの直下に存在するすべてのコンテンツを囲う要素を指定する
childDelta1	小要素のスクロールスピードを指定する値が小さいと滑らかに、大きいと進む量が多くなる
childDelta2	小要素のスクロールスピードを指定する値が小さいと滑らかに、大きいと進む量が多くなる
parentDelta	parentのスクロールスピードを指定する

data-*

jquery-inertiaScrollに用意されているdata属性です。data属性はHTML要素に直接記述します。

data-speed	要素のスクロールスピードを個別に変更することができる
data-margin	要素のtranslate3dの値を設定することができる

<section data-speed="1" data-margin="50">1</section>
<section data-speed="5">2</section>

以上がjquery-inertiaScrollの実装方法になります。

続いてNiceScrollというプラグインを使った慣性スクロールの実装方法をご紹介します。

NiceScroll

NiceScrollはjQueryの数あるスクロール系プラグインの中でも知名度のあるプラグインかと思います。慣性スクロールの対応はもちろん、要素を指定するだけでスクロールバーの色や形を簡単に、柔軟に変更することが可能です。

DEMO

下記はNiceScrollを使用した簡単なデモです。スクロールを変更する要素に「body」を指定して、色やバーの幅等を変更しています。CSSはまったく記述していないのに、見た目も簡単に変更することができています。

See the Pen
SmoothScroll2 | jQuery by ryoy (@intotheprogram)
on CodePen.

公式サイトには他にも多くのサンプルが用意されています。お時間がある方はぜひ見てみてください。おそらくスクロールバーに対するほとんどの課題を解決できるかと思います。

https://nicescroll.areaaperta.com/demo/

配布サイト

NiceScrollのプラグインはGitHubにて配布されています。下記のリンクよりダウンロードできます。

https://github.com/inuyaksa/jquery.nicescroll

使い方

NiceScrollの使い方は簡単です。

ダウンロードしたプラグインを展開すると下記のファイルが内容されているかと思います。

jquery.nicescroll.js

圧縮されている方を使用する場合は「jquery.nicescroll.min.js」でも問題ありません。どちらかのファイルをjQuery本体の下で読み込みます。

<!-- jQueryを読み込む -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- プラグインを読み込む -->
<script src="path/jquery.nicescroll.js"></script>

後はjQueruのセレクタに慣性スクロールに変更したい要素を指定して、プラグインを呼び出します。

$('body').niceScroll();

これだけで慣性スクロールを導入することができます。

NiceScrollにはプラグインで指定することができるオプションが豊富に用意されています。オプションを指定する場合は下記のように記述します。

$('body').niceScroll({
  //ここにオプションを追記
});

下記のページの最後の方に、NiceScrollの充実した英語のドキュメントが用意されています。翻訳でも十分に理解できるレベルの内容ですので、スクロールバーをがっつりカスタマイズされる場合にご覧いただければと思います。

https://github.com/inuyaksa/jquery.nicescroll

以上がNiceScrollの実装方法になります。

easeScroll

最後にeaseScrollというプラグインをご紹介したいと思います。

easeScrollはマウスホイールのスクロールだけではなくパソコンのキーボードやスマホやタブレットのようなタッチ操作のデバイスにも対応したjQueryのプラグインです。簡単に導入することができ、設定項目も最低限のものしか用意されていないため、手軽に実装することが可能です。

DEMO

下記はeaseScrollをデフォルトの状態で設定したデモになります。慣性スクロールが有効になっているかと思います。

See the Pen
SmoothScroll3 | jQuery by ryoy (@intotheprogram)
on CodePen.

配布サイト

下記はeaseScrollが配布されているサイトです。ページ左上の「Download」と表示されたボタンをクリックすると圧縮ファイルをダウンロードすることができます。

使い方

配布サイトからプラグイン本体をダウンロードしておきます。easeScrollはjQueryのプラグインのため、jQuery本体を読み込んだ後にプラグインを読み込みます。プラグインの下にプラグインを実行するためのスクリプトを記述します。

記述をまとめると下記のようになります。

<!-- jQueryを読み込む -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- プラグインを読み込む -->
<script src="path/jquery.easeScroll.js"></script>  

<script> 
$('body').easeScroll();
</script>

オプション

easeScrollで設定可能なオプションが複数用意されています。オプションを使用する場合は下記のように指定します。

$('body').easeScroll({
  frameRate: 60,
  animationTime: 1000,
  stepSize: 120,
  pulseAlgorithm: 1,
  pulseScale: 8,
  pulseNormalize: 1,
  accelerationDelta: 20,
  accelerationMax: 1,
  keyboardSupport: true,
  arrowScroll: 50,
  touchpadSupport: true,
  fixedBackground: true
});

下記は各オプションの設定内容です。公式の文献がないため私自身が検証した結果となりますので不備があるかもしれないですが、予め了承ください。

frameRate	フレームレートを設定します。数値が大きいほど滑らかな動きになりますが、負荷も高くなります。
animationTime	動作時間を設定します。ミリ秒で指定することができます。数値が高くなるほどゆっくりといたアニメーションになります。
stepSize	1スクロールの移動距離を設定します。スクロールバーの矢印をクリックした際の挙動ではなく、マウスホイール等で有効な設定です。
pulseAlgorithm	こちらは1のままで問題ないです。変更すると挙動が不安定になります。
pulseScale	スクロールが停止する際の挙動を設定します。数値が高くなるほど停止速度が早くなります。
pulseNormalize	こちらは1のままで問題ないです。変更すると挙動が不安定になります。
accelerationDelta	加速に関する設定です。値を変更しても変化は見られませんでしたので、設定する必要はないかもしれません。
accelerationMax	加速に関する設定です。値を変更しても変化は見られませんでしたので、設定する必要はないかもしれません。
keyboardSupport	キーボード操作の有効無効を設定します。有効にするとキーボード操作に関する設定が可能と可能となります。
arrowScroll	キーボードの矢印を押下した際の移動距離を設定します。数値が高いほど矢印1回の移動距離が増します。
touchpadSupport	スマートフォンやタブレットのタッチ操作に関する設定です。有効にするとタッチ操作時に慣性スクロールが有効になります。
fixedBackground	背景に関する設定です。背景画像等を設定して検証してみましたが変化は見られませんでしたので、設定する必要はないかもしれません。

以上がeaseScrollの実装方法になります。

最後に

慣性スクロールはページをスクロールした際に移動に余韻を持たせることができるため、サイトの印象を簡単に大きく変えることができます。しかし、閲覧してくれるユーザーの中には慣性スクロールを好ましく思わない方もいらっしゃると思いますので、あまりストレスにならないスピードに設定してご活用いただければと思います。

以上、jQueryでマウスホイールのスクロールを滑らかにするプラグインのご紹介でした！