【ScrollHintの使い方】横スクロール可能なコンテンツに「ヒント」を表示するJSライブラリ

悩んでいる人

スマホのときにテーブルの表示を横スクロールにしたけど、スクロールできるのかどうかパッと見でわからないの…なんかいい方法ないかな?

本記事では、上記の悩みを解決します。

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
ShopifyやWordPressのお仕事をすることが多いのですが、現在フリーランスとして働きながら、WEB開発の学習をしております。

スポンサーリンク

目次

今回のゴール

横スクロール可能なコンテンツ(今回はテーブル)に下記のように「スクロールできます」という表示をさせる

さきにどんなコードで実装しているのか確認したい方向けに実際のコード貼っておきます。

See the Pen Untitled by TakahiroOkada (@okalog) on CodePen.

ScrollHintの導入方法

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

ScrollHintの導入方法
  1. CDNを利用する
  2. npm, yarnでインストールする
  3. ファイルをダウンロードする

どれを使っても最終的に同じ実装ができるので、ご自身の使いやすいものや案件に合わせて導入方法は選択ください。

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>

npm, yarnでインストールする

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

//npm
npm install scroll-hint --save

//yarn
yarn add scroll-hint

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

公式サイトのダウンロードボタンからファイルをダウンロードします。

CSSフォルダ → scroll-hint.css
jsフォルダ→ scrollhint.js

して、HTML上で読み込みます。

ScrollHintの使い方

HTMLとJavaScriptをに分けて見ていきます。

HTML

<div class="table__inner js-table-scroll-hint">
  <table>
    <tr>
      <th></th>
      <th>日本</th>
      <th>アメリカ</th>
      <th>中国</th>
      <th>タンザニア</th>
    </tr>

    //省略
    
  <tr>
      <th>挨拶</th>
      <th>こんにちは</th>
      <th>ハロー</th>
      <th>ニーハオ</th>
      <th>ジャンボ</th>
    </tr>
  </table>
</div>

ポイントは、tableタグをdivタグで囲み、JavaScriptを発火させるためのクラスを付与します。

ここでは、js-table-scroll-hintというクラスを付与しております。

JavaScript

JavaScriptでは以下のように、記述します。

  new ScrollHint(".js-table-scroll-hint");

これで横スクロールにヒントのマークが表示されるようになりました。

オプション一覧

よく使うものには★をつけてあります。

スクロールできます
オプションデフォルト値説明
suggestClassis-active要素がスクロールインしているときに追加されるクラス名。
scrollableClassis-scrollable要素がスクロール可能な場合に追加されるクラス名。
scrollableRightClassis-right-scrollable要素が右スクロール可能な場合に追加されるクラス名。
scrollableLeftClassis-left-scrollable要素が左スクロールするときに追加されるクラス名。
scrollHintClassscroll-hint要素に追加されるクラス名。
scrollHintIconClassscroll-hint-iconアイコンに追加されるクラス名
scrollHintIconAppendClassscroll-hint-icon-white要素のアイコンに追加される別のクラス名。
scrollHintIconWrapClassscroll-hint-icon-wrapアイコンのラッパーに追加されるクラス名。
scrollHintTextscroll-hint-textテキストに付加するクラス名。
★ remainingTime-1スクロールヒントアイコンを非表示にするタイミング(ms)。
scrollHintBorderWidth10scrollHintBorderWidth 10 要素のシャドウボックスのボーダー幅。
enableOverflowScrollingtrueiOS使用時、値がtrueの場合。
-webkit-overflow-scrollingプロパティが要素に追加されます。
★ suggestiveShadowfalsesuggestiveShadow要素がスクロール可能なとき、影を表示する。
applyToParentsfalse親要素にJavaScriptを適用します。
★ i18n.scrollablescrollableここからスクロール可能なテキストを変更することができます。

オプションの記述例になります。

new ScrollHint(".js-table-scroll-hint", {
 suggestiveShadow: true,
 remainingTime: 5000,
 i18n: {
  scrollable: "スクロールできます"
 }
});

最後に、再度実装したものを貼っておきますのでもしわからなくなったときにはこちらを参考に実装してみてください^^

See the Pen Untitled by TakahiroOkada (@okalog) on CodePen.

まとめ

横スクロールできるコンテンツに対して、ヒントを与えてくれる親切なJavaScriptライブリを紹介しました!

テーブルとかで結構横スクロールさせることが多いとおもうのですが、是非こちらを使ってあげてユーザーが使いやすいサイト・ストアをつくってみてください!

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次