スマホやタブレットの場合にテーブルが横スクロールできることをお知らせしてくれるスクリプト「ScrollHint」

スマホやタブレットの場合にテーブルが横スクロールできることをお知らせしてくれるスクリプト「ScrollHint」

スマホやタブレットの場合にテーブルが横スクロールできることをお知らせしてくれるスクリプト「ScrollHint」

ScrollHintは、スマホやタブレットの場合に、横にはみ出したテーブルを横スクロール可能にし、横スクロールができることを視覚的にわかるように教えてくれるスクリプトです。

デモは以下ページで確認できますので、スマホやタブレットでアクセスしてみてください。

デモページを見る

ScrollHintの使い方

ステップ1. ScrollHintのCSSとスクリプトの読み込み

まずは、ScrollHintのCSSとスクリプトをサイトに読み込みましょう。以下を<head>~</head>に追加します。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.2/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@1.1.2/js/scroll-hint.js"></script>

GitHubからファイルをダウンロードして、サーバーに設置して読み込んでもOKです。

ステップ2. テーブルをdiv要素で内包

横スクロールさせたいテーブルをdiv要素で内包します。

<div class="js-scrollable">
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit.</td>
        <td>Lorem ipsum dolor sit.</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
      </tr>
    </tbody>
  </table>
</div>

div要素のクラス名は.js-scrollableとしていますが、任意のクラス名で大丈夫です。

ステップ3. ScrollHintの実行

最後にScrollHintを実行します。</body>の直前等に以下を追加してください。

<script>
new ScrollHint('.js-scrollable');
</script>

.js-scrollableの部分は、テーブルを内包するdiv要素で指定したクラス名を指定します。

ScrollHintのオプションも指定する場合は、以下のように記述します。

<script>
new ScrollHint('.js-scrollable', {
  scrollHintIconAppendClass: 'scroll-hint-icon-white', // white-icon will appear
applyToParents: true,
  i18n: {
    scrollable: 'スクロールできます'
  }
});
</script>

用意されているオプションは以下の通りです。

Name Default Description
suggestClass is-active Classname to be added when the element is scrolled-in
scrollableClass is-scrollable Classname to be added when the element is scrollable
scrollableRightClass is-right-scrollable Classname to be added when the element is right-scrollable
scrollableLeftClass is-left-scrollable Classname to be added when the element is left-scrollable
scrollHintClass scroll-hint Classname to be added to the element
scrollHintIconClass scroll-hint-icon Classname to be added to the icon
scrollHintIconAppendClass scroll-hint-icon-white Another classname to be added to the element’s icon
scrollHintIconWrapClass scroll-hint-icon-wrap Classname to be added to the icon’s wrapper
scrollHintText scroll-hint-text Classname to be added to the text
remainingTime -1 When to hide scroll-hint icon (ms)
scrollHintBorderWidth 10 Shadowbox border width of the element
enableOverflowScrolling true When using iOS and the value is true,
-webkit-overflow-scrolling property will be added to the element
suggestiveShadow false Show suggestive shadow, when the element is scrollable
applyToParents false Apply JavaScript to the parent element
i18n.scrollable scrollable You can change the scrollable text from here

あとがき

サイトのUI・UX的にもわかりやすくなりますね。

横スクロールできることを明示しなくてもいいから、CSSのみでテーブルの横スクロールを実装したいという場合は、「レスポンシブサイトでテーブルがはみ出てしまう場合にCSSでテーブル部分だけ横スクロールさせる方法」をご参照ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です