横スクロールできるテーブルにスクロールヒントを表示する方法【ScrollHint】

公開日: 2023.05.08
最終更新日: 2026.07.17

カラム数の多いテーブルは、画面幅の狭いスマホでは表示しきれません。テーブル部分だけを横スクロールさせる方法がよく使われますが、そのままだと「横にスクロールできる」ことにユーザーが気づかないことがあります。

結論から言うと、JavaScriptライブラリ「ScrollHint」を使えば、横スクロール可能なテーブルに「スクロールできます」というヒントを表示できます。この記事では、ScrollHintの導入からHTML・CSS・スクリプトの設定、オプションまでを解説します。

1 デモ
2 必要なファイルをダウンロードして読み込む
3 HTML
- 3.1 tableの場合
- 3.2 imgの場合
4 スクリプト
5 CSS
- 5.1 tableの場合
- 5.2 imgの場合
6 まとめ

デモ

まずはデモをご覧ください。テーブル上にスクロールを促すアイコンが表示されます。

カラム1	カラム2	カラム3	カラム4	カラム5	カラム6	カラム7
行1	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト
行2	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト
行3	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト

それでは、作成する手順を説明していきます。

必要なファイルをダウンロードして読み込む

まずは、ライブラリの公式サイトから必要なファイルをダウンロードします。

ScrollHint公式サイト

ダウンロードしたzipファイルを解凍し、「css」フォルダから「scroll-hint.css」を、「js」フォルダから「scroll-hint.js」（もしくは軽量版の「scroll-hint.min.js」）を取り出します。取り出したファイルを、自サイトの<head>タグ内で読み込みます。

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

HTML

tableの場合

<div class="js-scrollable-wrap">
  <table class="js-scrollable">
    <tbody>
      <tr>
        <th>カラム1</th>
        <th>カラム2</th>
        <th>カラム3</th>
        <th>カラム4</th>
        <th>カラム5</th>
        <th>カラム6</th>
        <th>カラム7</th>
      </tr>
      <tr>
        <th>行1</th>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
      </tr>
      <tr>
        <th>行2</th>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
      </tr>
      <tr>
        <th>行3</th>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
      </tr>
    </tbody>
  </table>
</div>

<table class="js-scrollable">を<div class="js-scrollable-wrap">で囲むのがポイントです。

imgの場合

<div class="js-scrollable-wrap">
    <div class="js-scrollable">
        <img src="images/sample.png" alt="" />
    </div>
</div>

横長の画像を横スクロールさせたい場合も、同じjs-scrollable-wrap／js-scrollableの組み合わせで対応できます。

スクリプト

ページ読み込み後にScrollHintを初期化します。i18n.scrollableで、ヒントとして表示するテキストを指定できます。

<script>
    window.addEventListener('DOMContentLoaded', function() {
        new ScrollHint('.js-scrollable', {
            i18n: {
                scrollable: 'スクロールできます'
            }
        });
    });
</script>

使えるオプションは以下のとおりです。

数は多いですが、まず押さえておきたいのはi18n.scrollable（ヒントに表示する文言）とremainingTimeの2つです。remainingTimeにミリ秒を指定すると、その時間が経過したあとにヒントアイコンを自動で消せます。ヒントを出しっぱなしにすると煩わしい場合に便利です。細かく見た目や挙動を調整したくなったら、下の表から必要なオプションを探すとよいでしょう。

オプション名	デフォルト値	オプション説明
suggestClass	is-active	要素がスクロールインされたときに追加されるクラス名
scrollableClass	is-scrollable	要素がスクロール可能な場合に追加されるクラス名
scrollableRightClass	is-right-scrollable	要素が右スクロール可能の場合に追加されるクラス名
scrollableLeftClass	is-left-scrollable	要素が左スクロール可能の場合に追加されるクラス名
scrollHintClass	scroll-hint	要素に追加するクラス名
scrollHintIconClass	scroll-hint-icon	アイコンに追加するクラス名
scrollHintIconAppendClass	scroll-hint-icon-white	アイコンに追加するクラス名
scrollHintIconWrapClass	scroll-hint-icon-wrap	アイコンのラッパーに追加するクラス名
scrollHintText	scroll-hint-text	テキストに追加するクラス名
remainingTime	-1	スクロールヒントアイコンを非表示にするタイミング (ミリ秒)
scrollHintBorderWidth	10	要素のシャドーボックスの境界幅
enableOverflowScrolling	true	iOS を使用し、値が true の場合、 -webkit-overflow-scrolling プロパティが要素に追加されます
suggestiveShadow	false	要素がスクロール可能な場合、暗示的な影を表示する
applyToParents	false	JavaScript を親要素に適用する
offset	0	スクロール可能の基準を変更できます
i18n.scrollable	scrollable	ここからスクロール可能なテキストを変更できます

CSS

CSSは、最低限このくらい書いておけばOKです。

tableの場合

.js-scrollable-wrap {
	white-space: nowrap;
}

.js-scrollable {
	word-break: break-all;
	table-layout: fixed;
	display: block;
	overflow: scroll;
}

imgの場合

.js-scrollable-wrap {
	white-space: nowrap;
}

.js-scrollable {
	word-break: break-all;
	table-layout: fixed;
	display: block;
	overflow: scroll;
}

.js-scrollable img {
    width: 600px;
    max-width: none;
}