コンテンツがスクロール可能な場合にヒントを表示する ScrollHint の設定とカスタマイズ方法

OSS

レスポンシブデザインの普及により、デバイスの画面サイズに合わせてコンテンツを動的に調整することが一般的になりました。しかし、このアプローチは、特に ＜table＞要素などの広いコンテンツを含むページで課題を生じさせることがあります。

スマートフォンのような狭い画面では、重要な表データを見やすく表示させることが難しく、収まらない部分をスクロールさせることで解決できないかと考え、その際にスクロールできる事を気づいてもらうために、私たちが開発したのがユーザーに視覚的なヒントを提供するJavaScriptライブラリ「ScrollHint」を作りました。

2018年にリリースし、今では多くのサイトで「スクロールできます」を見かけるようになりました。ありがとうございます。また Google や X で ScrollHint を検索してみると、ブログの記事 や 感想の POST を見つけることができ、大変嬉しく思っております。

  1. デモ
  2. 特徴
  3. 使い方
  4. オプション
  5. ダウンロード
  6. 今後のアップデートについて
  7. リンク

デモ

デフォルトの設定だと scrollable と英語表記になりますが、オプションでテキストの変更や色などを変更することが可能です。

　

ドロップシャドーを設定した際のデモ

　

上記のデモで確認できますが <th> タグに対して背景色にグレーの設定がされているとドロップシャドーが効きません。<th> の背景も全て白背景の際には、ドロップシャドーの設定を有効にすることで、視覚的にさらに分かりやすくなります。

特徴

ScrollHintの特徴をいくつか挙げるとすれば、以下のポイントが挙げられます。

  • 視覚的ヒントの提供 : スクロール可能な要素に自動的に視覚的ヒントを追加し、ユーザーがコンテンツを見逃すことなく、スクロールして探索することを促します。
  • レスポンシブデザインのサポート : 狭い画面や様々なデバイスに適応し、特にレスポンシブデザインを採用しているウェブサイトでの利用に最適化されています。これにより、<table>要素などのコンテンツが狭い画面上でスクロールを必要とする場合にも、適切に対応できます。
  • 使いやすさ : 簡単に導入できる設計となっており、ウェブサイトの既存のHTML/CSSに容易に統合可能です。JavaScriptを少し記述するだけで、スクロールヒント機能を追加できます。
  • カスタマイズ可能 : 表示するヒントのスタイルや動作は、多くのカスタマイズオプションを通じて調整することが可能です。これにより、ウェブサイトのデザインやブランドに合わせて、ヒントの見た目を変更できます。
  • 軽量 : パフォーマンスに影響を与えることなく、スムーズに動作します。ScrollHintは効率的なコードで書かれており、ウェブサイトのロード時間や動作に負担をかけません。
  • アクセシビリティの向上 : すべてのユーザーがウェブサイトのコンテンツにアクセスしやすくなるように、スクロール可能な要素を明確に示すことで、アクセシビリティを向上させます。

これらの特徴により、ScrollHintはウェブサイトやアプリケーションのユーザーエクスペリエンスを向上させるための効果的なツールとなります。

使い方

JavaScript と CSS の読み込み

CDN から最新版を読み込み設定と <haed>タグに ScrollHint を動かす Class ( js-scrollable ) を設定する際には、以下のように書きます。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    new ScrollHint('.js-scrollable');
  });
</script>

HTML の記述

<table>タグに class="js-scrollable" を設定せず、<div>タグに Class を記述するようにしてください。

<div class="js-scrollable">
<table>
  <tr>
    <th></th>
    <th>スタンダード会員</th>
    <th>フルタイム会員</th>
    <th>法人会員</th>
  </tr>
  <tr>
    <th>料金</th>
    <td>11,000円/月（税込）</td>
    <td>16,500円/月（税込）</td>
    <td>19,800円/月（税込）</td>
  </tr>
  <tr>
    <th>平日</th>
    <td>10:00 - 18:00</td>
    <td>8:00 - 23:00</td>
    <td>8:00 - 23:00</td>
  </tr>
  <tr>
    <th>土日祝</th>
    <td>10:00 - 18:00</td>
    <td>8:00 - 18:00</td>
    <td>8:00 - 18:00</td>
  </tr>
</table>
</div>

オプション

またScrollHintにはオプションが用意されており、下のように第二引数にオプションのオブジェクトを設定することができます。
下の例では、アイコンカラーを白にして、デフォルトでは「scrollable」というメッセージを「スクロールできます」に変更しています。

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

主に以下のようなオプションが利用可能です。

名前 デフォルト値 説明
i18n.scrollable scrollable スクロールのメッセージを変更できます。
日本語化する際には、こちらの項目を利用ください。
remainingTime -1 一定時間が経ったらアイコンを非表示にします。
suggestiveShadow false 要素がスクロール可能の場合、アイコンの他にシャドーも表示します。
scrollHintBorderWidth 10 シャドーが有効場合のシャドーの幅を指定します。
applyToParents false 指定されたセレクターの親要素に対してJavaScriptが実行されます。
offset 0 要素がスクロール可能かどうかの基準を拡張できます。

あまり変更することは無いとは思いますが、ライブラリの実行時に付加される Class名を変更できるオプションになります。

名前 デフォルト値 説明
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 スクロールメッセージを表示する要素に追加されるクラス名です。

ダウンロード

CDN を利用しない場合には、https://github.com/appleple からダウンロードください。

ダウンロード

もしくは、npm 、yarn を使ったインストールも可能です。

npm install scroll-hint --save
yarn add scroll-hint

npm でのインストール後は、Webpack などの bundle ツールを使った require も可能です。

const ScrollHint = require('scroll-hint');

Babel をお使いの方は import もご利用いただけます。

import ScrollHint from 'scroll-hint';

今後のアップデートについて

この記事をリライトしている際に、こうあった方がいいのではないだろうか？ と思いついた事を共有しておきます。

1. 下の余白を見直し

scrollable の下の余白が足りないと思いませんか。.scroll-hint-icon { height: 80px; } と設定されているところを少しだけ高さの変更をしようと考えています。

　

リンク

今回の ScrollHint は、レスポンシブデザインのウェブサイトでの利用を考えて作られた JavaScript ライブラリですが、弊社では他にも同様に便利に使えるライブラリを公開しております。よろしければ、そちらもご活用ください。

スマートフォンで写真を大きく表示させる SmartPhoto.js をリリースしました | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル

appleple

スマートフォンで写真をタップすると、もともと表示されているサイズより小さく表示されるような体験をしたことはありませんか？ SmartPhoto.js では、大きく表示させることを一番に考え、写...

modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグイン（+ React版）をリリースしました | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル

appleple

.acms-admin-btn-flat { display: inline-block; padding: 8px 20px; line-height: 1; text-align: center; text-decoration: none; vertical-align: middle; border-radius: 4px; -webkit-t...

hiraku.js - オフキャンバスメニュー用 jQuery プラグイン をリリースしました | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル

appleple

この hiraku.js は、弊社で開発している a-blog cms の中で利用するために作られた「オフキャンバスメニュー用のJavaScript」を、より多くの人に利用してもらえるように jQuery のプラグイン...

その他にも、https://github.com/appleple で多くのライブラリなどを公開しておりますので、合わせてご覧ください。また、弊社では有償にはなりますが、JavaScriptのライブラリ開発のお手伝いも行っておりますので、お気軽に お問い合わせフォーム からご相談ください。

シェアする

関連記事

カテゴリー

タグクラウド

ブログ内検索

関連記事

Webにまつわる お困りごとをご相談ください。

こんなお手伝いができます

Webコンサルタントとしてのお手伝い／UIデザインのご相談／デジタルメディアの総合プロデュース／パンフレット・DMなどのDTP、ロゴ制作などのビジュアルデザイン

お問い合わせ

資料ダウンロード

何について知りたいですか？