BLOG

2025.12.14

[JavaScript] ScrollHintの使い方：横スクロールを分かりやすく！導入からカスタマイズまで解説

「横スクロールするコンテンツがあるけど、ユーザーに気づいてもらえない…」そんな悩みはありませんか？
ScrollHintを使えば、横スクロールできる要素に視覚的なヒントを表示し、ユーザーのUXを劇的に改善できます。
この記事では、ScrollHintの使い方を分かりやすく解説し、あなたのWebサイトをより使いやすくするための具体的な方法を紹介します。

ScrollHintとは？

ScrollHintは、Webサイト上で横スクロールが可能な要素に対して、視覚的なヒント（通常は矢印のアニメーション）を表示することで、ユーザーにその存在を効果的に伝えます。
これにより、ユーザーは迷うことなくコンテンツを閲覧できるようになり、結果としてWebサイトの回遊率向上やユーザー体験の改善に繋がります。

jQueryなどの外部ライブラリに依存せず、比較的簡単に導入・設定できる点も大きな魅力です。
要素が横スクロール可能になったタイミングで自動的にヒントを表示し、ユーザーの興味を引きつけます。

https://appleple.github.io/scroll-hint/

デモ

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

スクロールが必要な表にスクロールを促すアイコンが表示されます。

ScrollHintの利点

特徴	ScrollHint
導入の容易さ	JavaScriptのみで動作し、jQuery不要。数行のコードで実装可能。
視覚的な訴求力	横スクロール可能な要素にアニメーションする矢印を表示し、直感的に伝える。
自動検出機能	要素が横スクロール可能になったことを自動で検出し、ヒントを表示する。
カスタマイズ性	表示される矢印のデザインやアニメーション速度などを柔軟に調整可能。
パフォーマンス	軽量なライブラリであり、Webサイトの表示速度への影響が少ない。

代替手段としては、CSSでスクロールバーをカスタマイズしたり、JavaScriptで独自のヒント表示機能を実装したりする方法がありますが、ScrollHintはこれらの機能をシンプルかつ効果的に提供してくれます。

ScrollHintの導入方法

ScrollHintの導入方法をについて、CDN経由で読み込む方法と、npmを使用してプロジェクトに組み込む方法に分けて詳しく説明します。
どちらの方法も、HTML、CSS、JavaScriptを連携させることでScrollHintの機能を利用できるようになります。

CDNから導入する場合

CDN（Content Delivery Network）を利用してScrollHintを導入する最も手軽な方法です。
HTMLファイルの<head>タグ内、または<body>タグの末尾に、ScrollHintが提供するCDNリンクを記述するだけで、外部ファイルをダウンロードすることなく、すぐにScrollHintを利用できるようになります。
これにより、開発環境のセットアップが不要で、手早く実装したい場合に最適です。

例えば、以下のようにHTMLファイルに追記します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ScrollHint Example</title>
    <!-- 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>
</head>
<body>

</body>
</html>

npmから導入する場合

npm（Node Package Manager）またはyarnといったパッケージマネージャーを使用してScrollHintをプロジェクトにインストールし、JavaScriptファイル内でインポートして使用する方法です。
この方法は、WebpackやViteなどのモダンなJavaScript開発環境を使用している場合に適しており、プロジェクトの依存関係として管理しやすくなります。

まず、ターミナルを開き、プロジェクトのルートディレクトリで以下のコマンドを実行してScrollHintをインストールします。

npm install scroll-hint --save

インストールが完了したら、JavaScriptファイル内でScrollHintをインポートして使用します。

// main.js (または任意のJavaScriptファイル)
import ScrollHint from 'scroll-hint';

// ScrollHintの初期化
new ScrollHint('.scroll-container');

この方法では、CSSファイルも別途インポートする必要がある場合があります。プロジェクトのビルド設定に応じて、CSSファイルをインポートするか、CDNリンクをHTMLに直接記述してください。

ScrollHintの基本的な使い方

HTMLでの記述

ScrollHintを適用したい横スクロール可能なコンテンツは、HTML上で適切に構造化する必要があります。
一般的には、横スクロールのコンテナとなる親要素と、その中に配置される実際のコンテンツを持つ子要素で構成されます。
ScrollHintが対象要素を正しく認識できるよう、これらの要素には分かりやすいクラス名やIDを付与することが重要です。

ScrollHintを適用したい横スクロール可能なコンテンツは、HTML上で適切に構造化する必要があります。一般的には、横スクロールのコンテナとなる親要素と、その中に配置される実際のコンテンツを持つ子要素で構成されます。
ScrollHintが対象要素を正しく認識できるよう、これらの要素には分かりやすいクラス名やIDを付与することが重要です。

例えば、以下のようなHTML構造が考えられます。

<div class="table-wrap js-scroll-hint">
  <table>
    <tr>
      <th>タイトル</th>
      <th>タイトル</th>
      <th>タイトル</th>
    </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>
  </table>
</div>

この例では、.table-wrapが横スクロールの範囲を定義し、tableがその中に配置されるコンテンツ全体を囲んでいます。
ScrollHintはこの.table-wrapに対して適用されることになります。

CSSでのスタイル設定

ScrollHintが正しく機能するためには、横スクロールを有効にするためのCSS設定が不可欠です。最も基本的な設定は、コンテナ要素にoverflow-x: auto;を指定することです。
これにより、コンテンツがコンテナからはみ出した場合に、横スクロールバーが表示されるようになります。

以下に、基本的なCSSの例を示します。

.table-wrap {
  width: 100%;
  overflow-x: auto;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  min-width: 500px;　/* .table-wrapの幅が500px以下になったらスクロールヒントを表示 */
}

JavaScriptでの初期化

HTMLとCSSの設定が完了したら、最後にJavaScriptを使用してScrollHintを初期化します。
これにより、指定した要素に対して横スクロールのヒント表示機能が有効になります。

ScrollHintライブラリを読み込んだ後、対象となるHTML要素を選択し、ScrollHint()コンストラクタに渡すことで初期化できます。
基本的な使い方は以下のようになります。

// ScrollHintを初期化します
new ScrollHint('.js-scroll-hint');

このように、new ScrollHint('.js-scroll-hint');と記述するだけで、.js-scroll-hintクラスを持つ要素に対してScrollHintが適用されます。
これにより、ユーザーがその要素上でマウスをホバーしたり、スクロール操作を行ったりした際に、横スクロールの矢印ヒントが表示されるようになります。

初期化時にオプションを指定することで、表示される矢印のスタイルや挙動をカスタマイズすることも可能です。

ScrollHintのオプション設定とカスタマイズ

ScrollHintは、その動作や表示を細かくカスタマイズするための豊富なオプションを提供しています。
これにより、Webサイトのデザインや要件に合わせて、ヒントの表示方法を調整できます。

名前	デフォルト値	説明
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	スクロールのメッセージに追加するクラス名
i18n.scrollable	scrollable	スクロールのメッセージを変更できます。

それぞれのオプションは下記のように記述することが可能です。

<script>
  new ScrollHint('.js-scrollHint', {
    suggestClass: 'sugesst-class',
    scrollableClass: 'scrollable-class',
    scrollableRightClass: 'scrollable-right-class',
    scrollableLeftClass: 'scrollable-left-class',
    scrollHintClass: 'scroll-hint-class',
    scrollHintIconClass: 'icon-class',
    scrollHintIconAppendClass: 'icon-append-class',
    scrollHintIconWrapClass: 'icon-wrap-class',
    scrollHintText: 'scroll-hint-text-class',
    scrollHintText: 'scroll-hint-text-class',
    i18n: {
      scrollable: 'スクロールできます'
    },
  });
</script>

まとめ

この記事では、横スクロールするコンテンツのUI/UXを劇的に改善するJavaScriptライブラリ「ScrollHint」について、その導入方法からカスタマイズ、実践的なコード例までを詳しく解説しました。

ユーザーが横スクロールできることに気づかず、コンテンツを見逃してしまうという課題を解決するために、ScrollHintは視覚的なヒントを提供します。

INDEX

アーツビーについて
もっと知りたい方へ

What’s Artsbe

サービス一覧制作実績制作の流れ

Contact

お問い合わせ

Webサイトのリニューアルや新規制作、
マーケティングについてなど、Webに関することでしたらお気軽にご相談ください。
ロゴの制作なども対応可能ですので、サービス一覧より何ができるのかご確認ください。

CONTACT