【ScrollHintの使い方】横スクロール可能な要素にヒントを表示するJavaScriptライブラリ

横スクロールができる箇所に、指のアニメーションアイコンを表示したいけどできる？

例えばこちらを見て下さい。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

パッと見て、これがスクロール可能だと分かりましたか？

しかし、このようになっていれば、横スクロール可能だと分かります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

今回は、この横スクロールが可能だと知らせるアイコンを表示できる、JavaScriptのライブラリ『ScrollHint』 の使い方を解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

ScrollHintの使い方

ScrollHintは、JavaScriptのライブラリになります。

そのためjQueryは使いませんが、使うためにはScrollHintを読み込むか、インストールする必要があります。

導入方法

導入方法は3つあります。

ファイルをダウンロードして読み込む
CDNで読み込む
npm、yarnを使ってインストール

今回は、CDNを使って読み込む方法を解説します。

CDNで読み込む場合は、以下のコードをHTMLのheadタグに書きます。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>

これでOKです。

使い方

まずは、基本となるHTMLはこちらになります。

<div class="container js-scroll">
  <table>
    <tr>
      <th>表のタイトル</th>
      <th>表のタイトル</th>
      <th>表のタイトル</th>
      <th>表のタイトル</th>
    </tr>
    <tr>
      <td>サンプルテキスト</td>
      <td>サンプルテキスト</td>
      <td>サンプルテキスト</td>
      <td>サンプルテキスト</td>
    </tr>
    <tr>
      <td>サンプルテキスト</td>
      <td>サンプルテキスト</td>
      <td>サンプルテキスト</td>
      <td>サンプルテキスト</td>
    </tr>
    <tr>
      <td>サンプルテキスト</td>
      <td>サンプルテキスト</td>
      <td>サンプルテキスト</td>
      <td>サンプルテキスト</td>
    </tr>
  </table>
</div>

この横スクロールできるtableの作り方は、以下の記事を参照下さい。

ScrollHintのオプションとデモ

ScrollHintにはオプションがいくつかありますが、使用頻度が高そうなのは以下になります。

オプション名	デフォルト値	説明
i18n.scrollable	scrollable	スクロールの文字を変更
remainingTime	-1	一定時間経ったら非表示（ミリ秒）
suggestiveShadow	false	横スクロール可能な場合に影を表示
scrollHintIconAppendClass	なし	アイコンに追加するclass名

このオプションを使ったデモを、それぞれご紹介します。

スクロールの文字を変更

スクロールの文字はデフォルトでは『scrollable』ですが、この文字を変更する場合のコードはこちらです。

new ScrollHint(".js-scroll", {
  i18n: {
    scrollable: "横スクロール",
  },
});

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

もちろん他の文字でも良いですが、『横スクロール』が一番シンプルで良いかなと思います。

一定時間経過すると非表示

デフォルトでは横スクロールしないと消えませんが、一定時間経ったら非表示にすることもできます。

例えば、3秒後に非表示にする場合のコードはこちらです。

new ScrollHint(".js-scroll", {
  remainingTime: 3000,
});

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

アイコンが表示されて3秒後に非表示になりました。

最初から見たい場合は、右下の『Rerun』をクリックして下さい。

影を付ける

横スクロール可能な場合に、影を付ける時のコードはこちら。

new ScrollHint(".js-scroll", {
  suggestiveShadow: true,
});

デモはこちら。

See the Pen
ScrollHint解説⑥ by junpei (@junpei-sugiyama)
on CodePen.

最初は右だけに影、スクロール中は両端に影、右端まで行くと左だけ影となります。

背景を白にする

デフォルトの背景は灰色ですが、これを白にする場合のコードはこちらです。

new ScrollHint(".js-scroll", {
  scrollHintIconAppendClass: "scroll-hint-icon-white",
});

これは背景を白にするオプションではなく、class名を付与するオプションです。

ただし、白にする場合はscroll-hint-icon-whiteと書けば、ScrollHintが設定しているスタイルが適用されます（白だけ特別）

デモはこちら。

See the Pen
ScrollHint解説④ by junpei (@junpei-sugiyama)
on CodePen.

背景が白になりました。

また、背景が白になると同時に、矢印・指・文字が黒になりました（矢印と指は画像が変わった）

背景を白以外にする

背景を白以外にしたい場合は、先ほどと同じように以下のコードを書きます。

new ScrollHint('.js-scroll', {
  scrollHintIconAppendClass: 'scroll-hint-icon-green'
});

先ほどはscroll-hint-icon-whiteで、今回は緑にしたいのでscroll-hint-icon-greenとしました。

しかし、scroll-hint-icon-whiteは背景を白にしたりアイコンを変えたりする設定が既にされているだけで、それ以外はただclass名を付与するだけです。

なので、背景を緑にしたい場合は、CSSを書く必要があります。

.scroll-hint-icon-green {
  background-color: green;
}

もちろんclass名は変えてもいいし、緑色以外も可能です。

デモはこちら。

See the Pen
ScrollHint解説⑤ by junpei (@junpei-sugiyama)
on CodePen.

オプションを複数付ける

最後に、ここまでご紹介してきたオプションを全部付けた場合は、このように書きます。

new ScrollHint(".js-scroll", {
  i18n: {
    scrollable: "横スクロール",
  },
  remainingTime: 3000,
  suggestiveShadow: true,
  scrollHintIconAppendClass: "scroll-hint-icon-white",
});

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.