2021.09.10
OSS
祝日や休日の要素にclassを追加する AssignHoliday をリリースしました
スマートフォンなどでサイトを閲覧する際にテーブルなど横に長いコンテンツが、ビューポートを飛び出してしまっていることがありませんか?そういったコンテンツは横にスクロールできるようにCSSで調整しているケースもありますが、ぱっと見でそのコンテンツがスクロール可能かどうか判断できません。そこで今回は、横にスクロール可能な場合にスクロールできることを示唆するアイコンを表示するためのライブラリーを開発しました。
https://appleple.github.io/scroll-hint/では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説します。
See the Pen ScrollHintデモ by appleple (@appleple) on CodePen.
<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>
<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>
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 | 要素が右側にスクロールできるときに付与されるクラス名です。 |
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 | スクロールメッセージを表示する要素に追加されるクラス名です。 |
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';