スクロール可能な場合にヒントを表示するアニメーション

2025年8月1日 2025年8月2日

西尾洋祐

画面からはみ出す横長コンテンツに、「スクロールできます」と視覚的に伝えることができる「ScrollHint」をご紹介します。

アニメーションの効果

横スクロールが必要なコンテンツであることを、訪問者に気づいてもらいやすくなります。

完成デモの紹介

まずはデモをご覧ください。

See the Pen ScrollHint by はなはな氏 (@wxftomuu-the-selector) on CodePen.

ソースコードについて

HTML

今回のサンプルでは、画面からはみ出してしまう横長のテーブルに「スクロールできます」といったヒントを表示するアニメーションを実装しています。

ヒントを表示したい要素（この例では <table> タグ）を囲む親要素（<div> タグなど）に、JavaScriptで定義したクラス（例：.js-scrollable）を付けることで、アニメーションによるスクロールヒントが表示されるようになります。

<!-- ScrollHintのCSSを読み込み -->
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<!-- ScrollHintのJavaScriptを読み込み -->
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>

<h3>スクロール可能な場合にヒントを表示するアニメーション</h3>

<div class="container">
  <div class="item">
    <p>■ デフォルト</p>
    <div class="js-scrollable-default">
      <table>
        <tdoby>
        <tr>
          <th>プラン</th>
          <th>料金（税抜）</th>
          <th>利用時間</th>
          <th>利用回数</th>
          <th>備考</th>
        </tr>
        <tr>
          <th>Aプラン</th>
          <td>3,000円</td>
          <td>2時間／回</td>
          <td>2回／月</td>
          <td class="align-l">複雑なテーブルは縦長に整形できない。</td>
        </tr>
        <tr>
          <th>Bプラン</th>
          <td>5,000円</td>
          <td>4時間／回</td>
          <td>4回／月</td>
          <td class="align-l">スマホ等のデバイスでも見やすいようにスクロールさせる。</td>
        </tr>
        <tr>
          <th>Cプラン</th>
          <td>9,800円</td>
          <td>無制限</td>
          <td>無制限</td>
          <td class="align-l">スクロール可能であることをアニメーションで表示しておくとUIが向上する。</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="item">
    <p>■ 日本語</p>
    <div class="js-scrollable-jp">
      <table>
        <tdoby>
        <tr>
          <th>プラン</th>
          <th>料金（税抜）</th>
          <th>利用時間</th>
          <th>利用回数</th>
          <th>備考</th>
        </tr>
        <tr>
          <th>Aプラン</th>
          <td>3,000円</td>
          <td>2時間／回</td>
          <td>2回／月</td>
          <td>複雑なテーブルは縦長に整形できない。</td>
        </tr>
        <tr>
          <th>Bプラン</th>
          <td>5,000円</td>
          <td>4時間／回</td>
          <td>4回／月</td>
          <td>スマホ等のデバイスでも見やすいようにスクロールさせる。</td>
        </tr>
        <tr>
          <th>Cプラン</th>
          <td>9,800円</td>
          <td>無制限</td>
          <td>無制限</td>
          <td>スクロール可能であることをアニメーションで表示しておくとUIが向上する。</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="item">
    <p>■ 日本語＋白</p>
    <div class="js-scrollable-jp-white">
      <table>
        <tdoby>
        <tr>
          <th>プラン</th>
          <th>料金（税抜）</th>
          <th>利用時間</th>
          <th>利用回数</th>
          <th>備考</th>
        </tr>
        <tr>
          <th>Aプラン</th>
          <td>3,000円</td>
          <td>2時間／回</td>
          <td>2回／月</td>
          <td>複雑なテーブルは縦長に整形できない。</td>
        </tr>
        <tr>
          <th>Bプラン</th>
          <td>5,000円</td>
          <td>4時間／回</td>
          <td>4回／月</td>
          <td>スマホ等のデバイスでも見やすいようにスクロールさせる。</td>
        </tr>
        <tr>
          <th>Cプラン</th>
          <td>9,800円</td>
          <td>無制限</td>
          <td>無制限</td>
          <td>スクロール可能であることをアニメーションで表示しておくとUIが向上する。</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

このように、ヒントを表示したい要素をラッピングしたタグに .js-scrollable などのクラスを付けることで、「スクロールできます」といった視覚的なヒントを表示することができます。

この動作を実現するには、ScrollHintライブラリの読み込みと、JavaScriptによる初期化処理が必要です。
次に、実際のCSSとJavaScriptのコードを紹介します。

CSS

以下はサンプルの見た目を整えるためのスタイルです。
ScrollHintの機能や動作そのものには直接関係ありません。

/* コンテンツスタイル
-------------------------*/
body {
  background: #1a8093;
}
h3 {
  text-align: center;
  color: #fff;
}
.align-l {
  text-align: left; 
}
.container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
}
.container .item {
  width: 320px;
  margin: 0;
}
.container .item p {
  color: #fff;
  font-weight: bold;
  margin: 0 0 5px 0;
}
table {
  background: #fff;
  border-collapse: collapse;
}
table th {
  font-weight: normal;
  background: #f0f0f0;
}
table th, table td {
  padding: 20px;
  white-space:nowrap;
  border: 1px solid #ccc;
  text-align: center;
}
@media (max-width:999px) {
  .container {
    width:320px;
    display: block;
  }
  .container .item {
    margin-bottom: 20px;
    
  }
}

JS

ScrollHintライブラリを使用して、スクロール可能な要素にヒント（アニメーション）を表示します。
各パターンごとに異なるオプションを設定しています。

// scroll-hint
// --------------------------
// デフォルト設定のScrollHintを適用
// .js-scrollable-default クラスを持つ要素に対して、英語のヒントと影（suggestiveShadow）を表示
document.addEventListener('DOMContentLoaded', function () {
  new ScrollHint('.js-scrollable-default', {
    suggestiveShadow: true,
  });
});

// --------------------------
// 日本語表記にカスタマイズ
// .js-scrollable-jp クラスを持つ要素に対して、ヒント文言を「スクロールできます」に変更
document.addEventListener('DOMContentLoaded', function () {
  new ScrollHint('.js-scrollable-jp', {
    suggestiveShadow: true,
    i18n: {
      scrollable: 'スクロールできます'
    }
  });
});

// --------------------------
// 日本語＋白背景対応
// .js-scrollable-jp-white クラスを持つ要素に対して、
// 日本語のヒント＋白背景用のカスタムクラス scroll-hint-icon-white を使用
document.addEventListener('DOMContentLoaded', function () {
  new ScrollHint('.js-scrollable-jp-white', {
    scrollHintIconAppendClass: 'scroll-hint-icon-white', // 白背景スタイルに変更
    suggestiveShadow: true,
    i18n: {
      scrollable: "スクロールできます"
    }
  });
});

ScrollHintには他にもさまざまなオプションが用意されています。詳しくは、開発元であるアップルップル社の公式ページをご覧ください。このような便利な機能を開発・公開してくださったことに、心より感謝いたします。