【JavaScript】スマホで便利！tableの横スクロールが実装できる「ScrollHint」の使い方

2022.8.20

【JavaScript】スマホで便利！tableの横スクロールが実装できる「ScrollHint」の使い方

tableで表を作成しますが、スマホの時はどうしていますか？
横スクロールができるようにすると思います。
そこで今回はjsで簡単に実装できる「ScrollHint」の使い方をご紹介します。

通常の横スクロール

まずは通常の横スクロールはこんな感じかと思います。

1列目	2列目	3列目	4列目	5列目	6列目	7列目	8列目	9列目	10列目
テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト
テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト
テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト
テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト

ScrollHintでの横スクロール

続いて、ScrollHintでの横スクロールはこんな感じです。

1列目	2列目	3列目	4列目	5列目	6列目	7列目	8列目	9列目	10列目
テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト
テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト
テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト
テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト	テキスト

同じ横スクロールでもアニメーションがあるとわかりやすいですね。

「ScrollHint」の使い方

公式サイト
https://appleple.github.io/scroll-hint/

まずはcssとjsファイルを読み込みます。

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

HTML
<link rel="stylesheet" href="css/scroll-hint.css">
<script src="js/scroll-hint.min.js"></script>

tableはclass=”tableWrap”で囲っています。

HTML
<div class="tableWrap">
  <table>
    <thead>
      <tr>
        <th>1列目</th>
        <th>2列目</th>
        <th>3列目</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
      </tr>
      <tr>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
      </tr>
      <tr>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
      </tr>
      <tr>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
      </tr>
    </tbody>
  </table>
</div>

最後にjsを記載します。

js
<script>
  new ScrollHint('.tableWrap', {
    suggestiveShadow: true,
    remainingTime: 5000,
    i18n: {
      scrollable: 'スクロールできます'
    }
  });
</script>

いかがでしょうか？
普通の横スクロールも良いですが、「ScrollHint」を入れるだけで、簡単に少しリッチなサイトに仕上がりますね。
是非試してみてください。