コンテンツがスクロール可能な場合にヒントを表示する ScrollHint をリリースしました

OSS

スマートフォンなどでサイトを閲覧する際にテーブルなど横に長いコンテンツが、ビューポートを飛び出してしまっていることがありませんか？そういったコンテンツは横にスクロールできるようにCSSで調整しているケースもありますが、ぱっと見でそのコンテンツがスクロール可能かどうか判断できません。そこで今回は、横にスクロール可能な場合にスクロールできることを示唆するアイコンを表示するためのライブラリーを開発しました。
https://appleple.github.io/scroll-hint/では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説します。

  1. デモ
  2. 特徴
  3. 使い方
  4. オプション
  5. ダウンロード
  6. リンク

デモ

See the Pen ScrollHintデモ by appleple (@appleple) on CodePen.

特徴

  • 国際化対応（i18n）
  • アイコン以外にもシャドーを表示してスクロールできることを示唆

使い方

JavaScriptとCSSの読み込み

<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の記述

<div class="js-scrollable">
  <table>
      <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit.</td>
          <td>Lorem ipsum dolor sit.</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
        </tr>
      </tbody>
    </table>
</div>

JavaScriptの記述

window.addEventListener('DOMContentLoaded', function(){
  new ScrollHint('.js-scrollable');
});

オプション

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

new ScrollHint('.js-scrollable', {
  scrollHintIconAppendClass: 'scroll-hint-icon-white', // white-icon will appear
  i18n: {
    scrollable: 'スクロールできます'
  }
});

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

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
名前 デフォルト値 説明
suggestClass is-active アイコンがビューポート内に入ってきたときに付与されるクラス名です。
scrollableClass is-scrollable 要素がスクロールできるときに付与されるクラス名です。
scrollableRightClass is-right-scrollable 要素が右側にスクロールできるときに付与されるクラス名です。
scrollableＬｅｆｔClass is-left-scrollable 要素が左側にスクロールできるときに付与されるクラス名です。
scrollHintClass scroll-hint 要素に付与されるクラス名です。
scrollHintIconClass scroll-hint-icon アイコンに付与されるクラス名です。
scrollHintIconAppendClass scroll-hint-icon-white アイコンに追加される別のクラス名です。
scrollHintIconWrapClass scroll-hint-icon-wrap アイコンのラッパー要素に追加されるクラス名です。
scrollHintText scroll-hint-text スクロールメッセージを表示する要素に追加されるクラス名です。
remainingTime -1 一定時間が経ったらアイコンを非表示にします。
scrollHintBorderWidth 10 シャドーが有効場合のシャドーの幅を指定します。
enableOverflowScrolling true iOSの場合にスムーズなスクロールになるようにCSSのプロパティを追加します。
suggestiveShadow false 要素がスクロール可能の場合、アイコンの他にシャドーも表示します。
applyToParents false 指定されたセレクターの親要素に対してJavaScriptが実行されます。
offset 0 要素がスクロール可能かどうかの基準を拡張できます。
i18n.scrollable scrollable スクロールのメッセージを変更できます。

ダウンロード

ダウンロードはこちらから行えます。
ダウンロード

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

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

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

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

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

import ScrollHint from 'scroll-hint';

リンク

appleple.github.io/scroll-hint

github.com/appleple/scroll-hint

シェアする

関連記事

カテゴリー

タグクラウド

ブログ内検索

関連記事

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

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

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

お問い合わせ

資料ダウンロード

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