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

Image

jQueryで、ウェブページでマウスホイールのスクロールを滑らかにする方法のご紹介です。

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

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

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

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

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

※本記事ではアンカーリンクをクリックした際のスクロールをスムーズスクロールにするのではなく、ページ全体のスクロールを滑らかにする方法をご紹介しています。予めご了承ください。

本記事の内容

  • jquery-inertiaScroll
  • NiceScroll

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

jquery-inertiaScroll

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

DEMO

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

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

ページのスクロールが慣性スクロールになっていることを確認していただけたでしょうか。上記のデモはデフォルトの値でjquery-inertiaScrollを使用していますが、それでも十分素敵なスクロールになっているかと思います。

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

配布サイト

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

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

使い方

jquery-inertiaScrollの使い方です。

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

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

スクリプトには、jQueryのセレクタに小要素、parent部分にすべてを囲う要素を指定します。

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
SmoothScroll02 | 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の実装方法になります。

最後に

慣性スクロールはページをスクロールした際に移動に余韻を持たせることができるため、サイトの印象を簡単に大きく変えることができます。

ただ、ユーザーの中に好ましく思わない方もいらっしゃいますので、あまりストレスにならないスピードに設定していただき、活用してもらえればと思います。

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

SHARE