横スクロールのある要素にヒントを表示するjsプラグイン「scroll-hint.js」の使い方

ひぐま
ひぐま

こんにちは、ひぐまです。
画面の表示領域に収まりきらない横長の表などをWEBサイトに載せる場合、特にスマホ表示時にやむを得ず横スクロールで閲覧できるようにすることがありますが、 パッと見てスクロールできるかがわかりにくいことがあり、ユーザービリティ的にちょっとな...と悩むことがあります。

今回はそんな場面でスクロール可能なことをユーザーに示すことができる、「scroll-hint.js」というjsプラグインをご紹介します。

スクロールができる要素に対して、下記の画像のように、これはスクロール可能だよ～！と視覚的に教えてくれます。

scrollhint.jpg

公式サイトからダウンロードする

まずは、公式サイトへアクセスし、「Download」ボタンから「scroll-hint-master.zip」をデスクトップ上におとしてきましょう。

ScrollHint公式サイト

ダウンロード後、zipファイルを解凍し、「css」フォルダのなかから、「scroll-hint.css」を、
jsフォルダの中から「scroll-hint.js」もしくは軽量版の「scroll-hint.min.js」を取り出します。

ファイルをHTMLに読み込む

取り出したファイルを、任意のパスで～内に読み込みます。

 <!DOCTYPE html>
<html lang="ja">
    <head>
        <link rel="stylesheet" href="css/scroll-hint.css">
        <script type="text/javascript" src="js/scroll-hint.min.js"></script>
    </head>
    <body>
        ...
    </body>
</html>

HTMLをかく

今回使用するHTMLはこんな感じです。

<main>
    <div class="tableArea">
        <table>
            <tr>
                <th>見出し</th>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
            </tr>
            <tr>
                <th>見出し</th>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
            </tr>
            <tr>
                <th>見出し</th>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
            </tr>
            <tr>
                <th>見出し</th>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
            </tr>
            <tr>
                <th>見出し</th>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
                <td>項目</td>
            </tr>
        </table>
    </div>
</main>

プラグインとの紐づけのために、ヒントを追加したいラッパー部分にidやclassを指定します。
今回の場合はtableを横スクロールで見れるようにするため、tableを囲んでいるdivにclass「tableArea」を指定しています。

CSS

header{ top:0; z-index:2; }
.tableArea{
    max-width:80%;/* 最大80%の領域内で要素をおさめる */
    margin:57px auto 0;
    overflow:auto;/*枠からはみ出たらスクロールさせる、はみ出なかった場合は何もしない*/
}
.tableArea table{
    color:#0080ff;
    border-collapse:collapse;/*隣接するセルのボーダーを共有する*/
}
.tableArea table th,
.tableArea table td{
    padding:20px;
    border:1px solid #0080ff;
    white-space:nowrap;/*文字を折り返さない*/
}
.scroll-hint-text{ margin-top:0; }

一応、今回使うCSSはこんな感じです。
overflow:auto;はプラグインが自動的につけてくれますが万が一プラグインが外れても大丈夫なように指定。 枠の幅を超えたらスクロールバーを表示させますが、越えなければ通常で表示します。

また、横スクロールを発生させて閲覧する想定なので、可読性のためにもwhite-space:nowrap;の指定で要素を折り返さないようにしたり。

スクリプトをかく

<script type="text/javascript">
    window.onload = function() {
        new ScrollHint('.tableArea');
    }
</script>

先ほど指定した名前を、new ScrollHint(' ');内へ書き記したら完了です。

オプションについて

これだけでも十分使えますが、オプションを追加することもできます。

i18n.scrollable
初期値：scrollable
アイコン下に表示される文字を変更できます。
suggestiveShadow
初期値：false(表示しない)
要素の端にシャドウを追加できます。※背景色を指定している場合は使用できないので注意
scrollHintBorderWidth
初期値：10
シャドウの幅を指定できます。
remainingTime
初期値：-1
ヒントを非表示にするタイミングを指定できます。（ms）
scrollHintIconAppendClass
初期値："scroll-hint-icon-white"
ヒントの背景を黒色から白色へ変更します

実際使用頻度の高そうなものだけピックアップしてご紹介しました。

デモでは下記のように指定しています。

<script type="text/javascript">
    window.onload = function() {
        new ScrollHint('.tableArea', {
            scrollHintIconAppendClass: 'scroll-hint-icon-white',//背景白
            suggestiveShadow:true,//シャドウを追加
            i18n: {
                scrollable: 'スクロールできます'//表示されるテキストを変更
            }
        });
    }
</script>

完成したデモはこちら

デモ

実際のところ、文字だけ変更してあげればそれで充分使えるものだと思います。
必要に応じてシャドウの追加や、背景色の変更など追加してご使用ください。

関連記事