Web制作 JavaScript

【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の作り方は、以下の記事を参照下さい。

あわせて読みたい
【CSS】tableタグで横スクロール出来るテーブルの作り方
【CSS】tableタグで横スクロール出来るテーブルの作り方

続きを見る

ポイントは、JavaScriptで使うclass、.js-scrollを付けている点です。

CSSはScrollHintに関係するものはないので、省略します(CodePenでCSSをクリックすれば見れます)

そしてJavaScriptはこちらです。

new ScrollHint(".js-scroll");

.js-scrollに、自分で付けたclass名を入れて下さい(class名は任意です)

デモはこちら。

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

一度横スクロールすると消えるので、最初から見たい場合は右下の『Rerun』をクリックして下さい。


ScrollHintのオプションとデモ

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

オプション名デフォルト値説明
i18n.scrollablescrollableスクロールの文字を変更
remainingTime-1一定時間経ったら非表示(ミリ秒)
suggestiveShadowfalse横スクロール可能な場合に影を表示
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.

まとめ:ScrollHintを使えば簡単に横スクロールを知らせられる!

今回は、JavaScriptのライブラリ『ScrollHint』を使って、横スクロール可能な場合にアイコンを表示させる方法を解説しました。

冒頭のように、パッと見て横スクロール可能か分かりにくい場合は、ScrollHintを使うと親切かと思います。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Web制作, JavaScript