• HOME > 
  • JavaScript > 
  • 横スクロール可能なことを示すヒントを表示するJavascri...

横スクロール可能なことを示すヒントを表示するJavascriptライブラリ【ScrollHintの使い方】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

ScrollHint(スクロールヒント)とは?

Webサイトに横長の表を載せる時は、スクロールで全体を見てもらう方法を取ることが多いのではないでしょうか?

画面サイズを超えた表でも掲載できる半面、スマホやブラウザによっては一目でスクロールできるかどうか分かりづらく、ユーザーに正しく情報を伝えられない恐れがあります。

このような場合、アイコンなどを表示してスクロール可能なコンテンツであることをわかりやすくすればユーザビリティがぐっと高まります。

今回紹介するJavascriptのライブラリ「ScrollHint」を使えば、下の例のようなスクロール可能を示すアイコンを簡単に表示することができます。

スクロールヒントの表示例

ScrollHintの使い方

ScrollHintの実装はとても簡単です。ライブラリをダウンロードもしくはCDNでサイトに読み込みJavascriptにわずかなコードを追記するだけです。

ライブラリを読み込む

まずはダウンロードもしくはCDNを利用してScrollHintのライブラリをサイトに読み込ませます。

ダウンロードする場合

ライブラリをダウンロードして使う場合は、以下の公式サイトにアクセスして必要なファイルをダウンロードしてください。

ScrollHint公式サイトはこちら

ZIPフォルダをダウンロードできたら解凍して、「scroll-hint.css」と「scroll-hint.js」を取り出して自身のサイトの任意のディレクトリにアップロードし、両者を読み込んでください。

HTML

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

CDNで読み込む場合

CDNで読み込む場合は次のコードをサイトのheadの中などに貼り付けるだけで完了です。

CDN

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

HTMLとCSSの記述の仕方

続いてライブラリを使ってスクロールヒントを表示させるためにHTMLとCSSを修正します。

HTMLでは、スクロールヒントを出したい要素(テーブルなど)をdivタグで囲み、Javascriptでセレクタとして指定するためのクラスを付与します。(ここでは「scrollable」とします)

CSSではスクロールバーが表示されるように「overflow-x」を設定します。

HTML

<div class="scrollable">
    <table class="sample_tbl">
    <tr>
        <th>見出し</th>
        <td>ダミーテキストダミーテキスト</td>
        <td>ダミーテキストダミーテキスト</td>
        <td>ダミーテキストダミーテキスト</td>
    </tr>
    省略
    <tr>
        <th>見出し</th>
        <td>ダミーテキストダミーテキスト</td>
        <td>ダミーテキストダミーテキスト</td>
        <td>ダミーテキストダミーテキスト</td>
    </tr>
    </table>
</div>

CSS

.scrollable{
    overflow-x:scroll;
}
.sample_tbl{
    width:900px;
}

Javascriptの記述の仕方

Javascript側では、先ほど付与したクラス名をセレクタにして以下のように指定すれば完了です。

ScrollHintの書き方

ページが読み込まれたらスクロールヒントの処理も実行させる場合は次のように書きます。

Javascript

window.onload = function(){
    new ScrollHint(".scrollable");
}

以上でScrollHintの実装は完了です。以下のようにアイコンが表示されるようになります。

ScrollHintの表示例

ScrollHintのオプション

ScrollHintにはいくつかのオプション設定が用意されています。今回はヒントアイコンの下の部分に表示されるテキストを変更する方法を解説します。

ヒントアイコンの下の部分に表示するテキストを変更する

ヒントアイコンの下の部分には「scrollable」と英語表記で表示されています。このままでも問題はありませんが、日本のサイトであれば日本語で記載した方が親切です。

ヒントアイコンの初期表示

この部分のテキストは以下のようにオプション設定を追記することで簡単に変更することができます。

Javascript

new ScrollHint(".scrollable",{
    i18n:{
        scrollable:"スクロールできます",//←新しいテキスト
    },
});
ヒントアイコンを日本語にする例

その他ScrollHintで設定可能なオプションについてはScrollHint公式サイトをご確認ください。

まとめ

以上がScrollHintライブラリを使ってスクロール可能な要素にヒントを表示させる方法です。

とても簡単に導入でき、ユーザビリティを高めることができるので是非利用してみてはいかがでしょうか?

広告
広告

関連する記事

サムネイル

JSのkeyup・keydown・keypressの違い【キ……

2024年06月13日
JavaScriptの「keyup」「keypress」「keydown」はいずれもユーザーのキーボードイベントを処理したい時に使用します。それぞれ処理が発火するタイミングなどに違いがあるので、用途に応じた使い分けが必要です。
サムネイル

JSでテキストボックスに入力された値を即時取得する【this……

2024年06月13日
ユーザーがinputのテキストボックスに入力した値をJavaScriptを使って即時取得して処理させたい状況がありましたので、その方法を備忘録として残しておきます。
サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。
サムネイル

JSで特定の位置までスクロールされたら要素を固定する方法【s……

2024年04月12日
CSSのstickyのような動きをJSで実装する JavaScriptを使って、「ある要素がページ上部に当たるまでスクロールされたら、その位置でその要素を固定表 […]
サムネイル

JSで日付を表示するならtoLocaleDateString……

2024年03月15日
toLocaleDateStringは日付のフォーマットを少ないコードで簡潔に行えるメソッドです。20XX年X月X日というような年月日表示はもちろん、曜日の取得や西暦と和暦の変換まで即座に行ってくれます
サムネイル

JSで自動かな入力補完を実装できるライブラリ【jquery.……

2024年03月15日
jquery.autokana.jsは入力された日本語テキストのふりがな(フリガナ)を自動的に別の欄に入力してくれるJQueryのライブラリです。