横スクロール時にヒント出すScrollHintの使い方とカスタマイズ【jQuery】

横数ロール可能なコンテンツはPCの場合はスクロールバーが出るので分かりやすいのですが、スマホの場合はスクロールバーがあっても小さかったり、スクロールバーが無かったりして横スクロールできる事が分かり難いです。

今回はそんな時に活用できる、横スクロールが可能な際にヒントを出してくれるScrollHint.jsについて解説していきます。

ScrollHintの導入方法

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>

上記の記述で、最新のバージョンが読み込めます。
他のバージョンを読み込みしたい場合は、CSS・js共に「@latest」という箇所をバージョン名に変更するだけで大丈夫です。
※バージョン「1.2.5」を読み込みしたい場合は「@1.2.5」と記述します。

ファイルをダウンロードして読み込む

ファイルをダウンロードして読み込む場合は、公式サイトからファイルをダウンロードしサーバーにアップロードしてください。公式サイト内の「Download」ボタンをクリックでダウンロードが始まります。

ダウンロード後、css・jsフォルダ内にある以下のファイルを使用します。

• CSS：scroll-hint.css
• JS：scroll-hint.min.js

これらをHTMLのheadタグ内に読み込みしてください。

npm、yarnを使用してインストール

npm、yarnを使用してインストール場合は、下記のコマンドでインストール可能です。

// npm
npm install scroll-hint --save

// yarn
yarn add scroll-hint

ScrollHintの基本的な使い方

続いて、ScrollHintの基本的な使い方を解説していきます。
使い方は非常に簡単で、横スクロールのヒントを出したいHTMLのコンテンツを任意のクラス名を付けたタグで囲い、jsでそのクラス名を指定するだけです。

使用例として以下をご覧ください。

<div class="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>

new ScrollHint('.js_scroll');

今回はtableを横スクロールにしたので、js_scrollというクラス名を付けたdivタグで囲い、jsでjs_scrollを指定しています。このように、クラス名は合わせる必要がありますので注意してください。

ScrollHintのオプションとカスタマイズ

ScrollHintはデフォルトの状態でもそのまま使えるようになっていますが、いくつかオプションが用意されています。
下記でのオプションの解説と、オプションを利用したカスタマイズ例を掲載いたします。

オプション

ScrollHintではいくつかオプションが用意されていますが、使用頻度の高そうなオプションは以下となります。

その他のオプションに関しては公式サイトのドキュメントをご確認ください。
続いて、上記オプションを使った使用例を掲載いたします。

アイコン下のメッセージの変更

アイコンの下に表示される文字はデフォルトで「scrollable」ですが、下記のコードで表示される文字を変更する事ができます。

new ScrollHint(".js_scroll", {
    i18n: {
        scrollable: "スクロールできます"
    },
});

デフォルトのCSSのままだと10文字前後しか1行に入らず改行されてしまいますので、改行せずに1行で表示するには以下のようにCSSを変更する必要があります。

.js_scroll  .scroll-hint-icon {
    width: 200px;
    left: calc(50% - 100px);
}

上記のように文字の長さによって合わせるようにしてください。

5秒後に非表示にする

デフォルトではスクロールしたら非表示になりますが、スクロールしなくても5秒後に非表示になるようにします。
-1を指定した場合は、スクロールしても、時間が経っても消えません。

new ScrollHint(".js_scroll", {
    remainingTime: '5000'
});

影を付ける

横スクロールが可能な場合に影を付けるには以下の内容を記述します。

new ScrollHint(".js_scroll", {
    suggestiveShadow: true
});

最初は右側、スクロール中は両端、右端までスクロールした場合は左側に影が付きます。
今回のテーブルように背景色が付いている場合は影に重なってしまうようです。

背景色を変更する

デフォルトの背景色は黒ですが、背景色を変更する場合はクラスを付与します。

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

このオプションは背景色を変更するオプションではなく、クラスを付与するものになります。
ScrollHintのCSSで背景色を白にする「scroll-hint-icon-white」というクラスは用意されていますので、背景色を白にする場合は上記のままで大丈夫ですが、他の色に変更する場合はCSSを追加する必要があります。

例として、背景色を青にした場合は以下のようになります。

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

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

上記のように、任意のクラス名で好きな色を付ける事が可能です。
オプションを複数付けたい場合は、カンマ区切りでオプションを記述してください。

ScrollHintが表示されない場合

ScrollHintが表示されない場合は以下を確認してみてください。

読み込む順番

ファイルの読み込みの順番を確認してみてください。
ScrollHint本体と、実行しているjsを記述しているファイルがあるかと思いますので、下記のようにScrollHint本体を先に、実行しているjsはその次に読み込みをしてください。

<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
<script src="/js/script.js"></script>

オプションのapplyToParents: trueを使用している

今回解説していないオプションで、applyToParentsというオプションがあります。
これは、指定した要素の親要素をスクロールするというオプションになります。

公式サイトの解説で、なぜかこのオプションが指定されている状態ですので、そのままコピペすると意図しない動作になりますので注意してください。

さいごに

いかがでしたでしょうか。
今回は、横スクロール時にヒント出すScrollHintの使い方とカスタマイズについて解説しました。
テーブルだけではなく、画像などでも横スクロールを使用する機会があるかと思いますので、その際はぜひ使ってみて下さい。