横スクロールするコンテンツにヒントを表示できるjsライブラリ「ScrollHint」の使い方

スマホ画面のように幅が狭いときに、横スクロールできるコンテンツを配置したいときがあります。ただ何もしないで配置すると、ユーザーが横スクロールをしないで読み進めてしまうこともあります。そんな際に下記のように、スクロールする印があれば、スクロールすることの誘導が可能です。

ということで今回はスクロールヒントを表示できるjsライブラリ「ScrollHint」の使い方を解説します。

ScrollHintのファイルを読み込む

ライブラリなので、まずはファイルを読み込む必要があります。ファイルを読み込む方法はCDNを利用する、ファイルをダウンロードする、npmでインストールする方法があります。

CDNを利用する方法

CDNでは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>

ダウンロードやインストールをしなくても気軽に使えるのがCDNのよいところですね。

ファイルをダウンロードする方法

ScrollHintのダウンロードページから「Download」をクリックして、専用のファイルをダウンロードしまします。「scroll-hint-master」というファイルがダウンロードされます。

ダウンロードしたら解凍しましょう。解凍したら「cssフォルダ」から「scroll-hintファイル」「jsファイルから、scroll-hint.jsファイルもしくはscroll-hint.min.jsファイル」をダウンロードしてください。

そして下記の記述のようにファイルを読み込ませましょう。

<link rel="stylesheet" href="scroll-hint.css">

<script src="scroll-hint.js"></script>

npmでインストールする方法

npmでは下記の記述で読み込ませます。

npm install scroll-hint --save

import ScrollHint from 'scroll-hint'

ScrollHintの使い方

次に下記のようにスクロールヒントを表示させる方法を解説します。

上記の料金表は下記のHTML、CSSで作成しました。

▢HTML

    <h2 class="price_table">ホームーページ作成プラン料金表</h2>
    <div class="price_table_scroll js-scrollable">
        <section class="price_table_content">
            <ul class="price_list">
                <li>
                    <h3 class="price_list_title">ホームページプランS</h3>
                    <div class="price">100,000円～</div>
                    <div class="price_text">
                        テキストテキストテキストテキストテキストテキスト
                    </div>
                </li>
                <li>
                    <h3 class="price_list_title">ホームページプランM</h3>
                    <div class="price">300,000円～</div>
                    <div class="price_text">
                        テキストテキストテキストテキストテキストテキスト
                    </div>
                </li>
                <li>
                    <h3 class="price_list_title">ホームページプランL</h3>
                    <div class="price">500,000円～</div>
                    <div class="price_text">
                        テキストテキストテキストテキストテキストテキスト
                    </div>
                </li>
            </ul>
        </section>
    </div>

▢CSS

* {
  margin: 0px;
  padding: 0px;
}

.price_table {
  text-align: center;
  margin-top: 20px;
}

.price_table_scroll {
  margin-left: 20px;
  margin-right: 20px;
}

.price_table_scroll .price_table_content {
  width: 800px;
  margin: 0 auto;
}

.price_table_scroll .price_table_content .price_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
}

.price_table_scroll .price_table_content .price_list li {
  width: 220px;
  height: 350px;
  margin-left: 50px;
  border: solid 1px #000074;
}

.price_table_scroll .price_table_content .price_list li .price_list_title {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 0px;
}

.price_table_scroll .price_table_content .price_list li .price {
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
}

.price_table_scroll .price_table_content .price_list li .price_text {
  padding: 0px 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.price_table_scroll .price_table_content .price_list li:first-child {
  margin-left: 0px;
}

ではコードの解説を詳しく下記で解説します。

js用のClassを付与する

<div class="price_table_scroll js-scrollable">
<section class="price_table_content">
(省略)
</section>
</div>

「js-scrollable」という記述がありますが、後にjavascriptで記述する「new ScrollHint(‘.js-scrollable’, {});」の箇所にある「.js-scrollable」と関連しています。なお「.js-scrollable」の箇所は任意の記述を指定できます。

new ScrollHint('.js-scrollable', {
});

こちらはjsの記述になります。これを記述するだけで、スクロールヒントが表示されます。

オプションを設定する

ScrollHintには様々なオプションがあります。

文字を変更できるオプション

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

デフォルトだと「scrollable」と表記されますが、上記のように記述すると文字を変更できます。

白に変更する方法

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

デフォルトだと黒ですが、上記の記述をすると白に変更できます。

背景が黒いときには白にすると見えやすくなりますね。

ScrollHintにはその他にも様々なオプションがあります。その他のオプションを確認したいときは、ScrollHintのダウンロードページを確認してください。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。