Blog スタッフブログ

2025.01.10

JavaScript WEB制作

JavaScript「scroll-hint.js」で横スクロールが発生する要素にヒントを表示

コーダーのKです。

画像やテーブルなどで横スクロールが発生する時、横スクロールできるということを一目でわかりやすくする方法をご紹介します。

scroll-hint.jsとは？

scroll-hint.js は、スクロール可能なコンテンツにスクロール可能であることを示すヒントを追加する軽量なJavaScriptプラグインです。

特に、横スクロールを伴うテーブルやリストの可読性を向上させることができます。

scroll-hint.jsの特徴

スクロール可能なコンテンツの端に視覚的なヒント（矢印）を表示し、ユーザーにスクロールできることを示すことができます。

レスポンシブにも対応しています。

対象の要素が画面に映るとヒントが表示され、ユーザーが横スクロールを操作するとヒントは非表示になります。

scroll-hint.jsの導入方法

CDNまたはローカルで読み込む

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

または、npmでインストールできます。

npm install scroll-hint

HTMLを作成

<div class="scrollable-container">
  <table>
    <thead>
      <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
        <th>ヘッダー3</th>
        <th>ヘッダー4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
        <td>データ4</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScriptで初期化

new ScrollHint('.scrollable-container', {
  scrollHintIconAppendClass: 'scroll-hint-icon', // カスタムクラスを適用
  applyToParents: true, // 親要素にも適用
  i18n: {
    scrollable: 'スクロールできます'
  }
});

この設定により、.scrollable-container 内にスクロールヒントが追加されます。

ScrollHint

次の記事へ

一覧へ戻る

前の記事へ